@spider-analyzer/timeline 5.0.8 → 5.0.9

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 5.0.9
+
+- Perf: cursor edge now tracks the pointer during drag/resize/draw, as
+  it did in the pre-hooks class component. Drag/resize hot paths
+  (`moveTimeLine`, `onDragCursor`, `onResizeLeftCursor`,
+  `onResizeRightCursor`, `onDrawCursor`) commit state via a
+  `flushSync`-wrapped `patchStateSync`. React 18 otherwise batches
+  updates from d3-drag's native listeners to its scheduler, adding ~1
+  frame of latency between pointer and cursor border. Also wrapped
+  `Histogram`, `XAxis`, `XGrid` in `React.memo` so the synchronous
+  per-event render only reconciles the Cursor subtree; heavy
+  histogram/axis/grid trees are skipped when only `start`/`stop`
+  change.
+
 ## 5.0.8
 
 - Perf: memoize the per-render histogram bar list and vertical scale.

package/dist/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
+var reactDom = require('react-dom');
 var luxon = require('luxon');
 var d3Scale = require('d3-scale');
 var PropTypes11 = require('prop-types');
@@ -1429,6 +1430,7 @@ Histogram.propTypes = {
   barHovered: PropTypes11__default.default.number,
   tooltipVisible: PropTypes11__default.default.bool
 };
+var Histogram_default = react.memo(Histogram);
 
 // src/timeLineElements/axesStyles.jsx
 var arrow = `m 0,-5 5,5 -5,5`;
@@ -1514,6 +1516,7 @@ XAxis.propTypes = {
   arrowPath: PropTypes11__default.default.string,
   onFormatTimeLegend: PropTypes11__default.default.func.isRequired
 };
+var XAxis_default = react.memo(XAxis);
 function YAxis({ classes, marks, yAxis, onFormatMetricLegend, maxHeight, origin, arrowPath = arrow }) {
   const className = (n) => cn(n, classes);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1968,6 +1971,7 @@ XAxis2.propTypes = {
   xAxis: PropTypes11__default.default.func,
   yAxisHeight: PropTypes11__default.default.number
 };
+var XGrid_default = react.memo(XAxis2);
 
 // src/time.ts
 function toMoment(x, zone) {
@@ -1990,8 +1994,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;
@@ -2086,6 +2090,11 @@ var TimeLineInner = react.forwardRef(function TimeLine(props, ref) {
   const patchState = react.useCallback((patch) => {
     setStateRaw((s) => ({ ...s, ...typeof patch === "function" ? patch(s) : patch }));
   }, []);
+  const patchStateSync = react.useCallback((patch) => {
+    reactDom.flushSync(() => {
+      setStateRaw((s) => ({ ...s, ...typeof patch === "function" ? patch(s) : patch }));
+    });
+  }, []);
   const checkAndCorrectDomain = react.useCallback(({ domain: domain2 }) => {
     return checkAndCorrectDomainPure({
       domain: domain2,
@@ -2329,9 +2338,9 @@ var TimeLineInner = react.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 = react.useCallback((delta, mouse) => {
     const xAxis = xAxisRef.current;
     const s = stateRef.current;
@@ -2351,9 +2360,9 @@ var TimeLineInner = react.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 = react.useCallback((delta, mouse) => {
     const xAxis = xAxisRef.current;
     const s = stateRef.current;
@@ -2373,9 +2382,9 @@ var TimeLineInner = react.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 = react.useCallback((delta, mouse) => {
     const xAxis = xAxisRef.current;
     const s = stateRef.current;
@@ -2389,8 +2398,8 @@ var TimeLineInner = react.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 = react.useCallback((pos) => {
     const xAxis = xAxisRef.current;
     patchState({
@@ -2418,9 +2427,9 @@ var TimeLineInner = react.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 = react.useCallback(() => {
     stopAutoMove();
     const { onCustomRange, selectBarOnClick } = propsRef.current;
@@ -2613,7 +2622,7 @@ var TimeLineInner = react.forwardRef(function TimeLine(props, ref) {
           }
         ),
         xAxisProp.showGrid && /* @__PURE__ */ jsxRuntime.jsx(
-          XAxis2,
+          XGrid_default,
           {
             classes,
             origin: pointZero,