@hrforte/react-pivottable 2.2.1 → 3.0.0

package/dist/PivotTableUI.js

@@ -54,6 +54,12 @@ var AGG_KEY_RADIX = 36;
 var AGG_KEY_OFFSET = 2;
 var AGG_KEY_LENGTH = 7;
 
+// Shared, identity-stable fallback for the `colSorts`/`rowSorts` props. An
+// inline `{}` literal would be a new object on every render, which makes the
+// rendered table re-render even when nothing about the pivot changed.
+var EMPTY_SORTS = {};
+var EMPTY_ATTR_VALUES = {};
+
 /* eslint-disable react/prop-types */
 // eslint can't see inherited propTypes!
 
@@ -243,6 +249,7 @@ function DraggableAttribute(props) {
 }
 
 DraggableAttribute.defaultProps = {
+  attrValues: EMPTY_ATTR_VALUES,
   valueFilter: {}
 };
 
@@ -1127,7 +1134,7 @@ function PivotLoadingOverlay() {
     _react2.default.createElement(
       'div',
       { className: 'pvtLoadingText' },
-      'Processing\u2026'
+      'Processing'
     )
   );
 }
@@ -1212,6 +1219,14 @@ function PivotTableUI(props) {
     instanceIdRef.current = 'pvt-' + pivotWorkerInstanceCounter++;
   }
 
+  // Latest props, readable from identity-stable event handlers. Layout effects
+  // run synchronously after every commit, so this is always up to date before
+  // the next user event is dispatched (unlike a render-time assignment).
+  var propsRef = (0, _react.useRef)(props);
+  (0, _react.useLayoutEffect)(function () {
+    propsRef.current = props;
+  });
+
   var workerEligible = (0, _react.useMemo)(function () {
     return (0, _pivotCompute.canComputeInWorker)(props, {
       enabled: props.enableWorker,
@@ -1221,7 +1236,26 @@ function PivotTableUI(props) {
 
   var computeSignature = (0, _react.useMemo)(function () {
     return (0, _pivotCompute.createComputeSignature)(props);
-  }, [props.rows, props.cols, props.aggregatorName, props.aggregations, props.vals, props.valueFilter, props.sorters, props.rowOrder, props.colOrder, props.rowSorts, props.colSorts]);
+  }, [props.rows, props.cols, props.aggregatorName, props.aggregations, props.vals, props.valueFilter, props.sorters, props.rowOrder, props.colOrder, props.rowSorts, props.colSorts, props.virtualizeRows, props.rendererName, props.tableOptions && props.tableOptions.aggregationDisplayMode]);
+
+  // Version the dataset during render instead of inside the compute effect.
+  // The effect runs *after* the render, so bumping the version there left one
+  // render in which the new props were combined with the previous precomputed
+  // result: a full (and wasted) re-render of the whole table on every change.
+  if (versionedDataRef.current !== props.data) {
+    versionedDataRef.current = props.data;
+    dataVersionRef.current += 1;
+  }
+
+  // Signature of the pivot result the current props + data require, and whether
+  // the precomputed result we hold actually belongs to it.
+  var currentSignature = computeSignature + '#' + dataVersionRef.current;
+  var precomputedMatches = Boolean(precomputedRef.current && precomputedRef.current.signature === currentSignature);
+
+  // Worker-eligible props whose result has not arrived yet. While this is true
+  // the previous, consistent table stays on screen (never a mix of new props
+  // with old results), so rendering and worker computation never overlap.
+  var pendingCompute = workerEligible && !precomputedMatches;
 
   var materializeInput = function materializeInput(nextData) {
     if (lastDataRef.current === nextData) {
@@ -1247,11 +1281,20 @@ function PivotTableUI(props) {
   }, [props.data, workerEligible]);
 
   (0, _react.useEffect)(function () {
+    (0, _PivotDataWorker.retainPivotWorker)(instanceIdRef.current);
     return function () {
       unmountedRef.current = true;
+      (0, _PivotDataWorker.releasePivotWorker)(instanceIdRef.current);
     };
   }, []);
 
+  (0, _react.useEffect)(function () {
+    var viewportKey = workerEligible && precomputed && precomputed.data ? precomputed.data.viewportKey : null;
+    return function () {
+      return (0, _PivotDataWorker.releasePivotInWorker)(viewportKey);
+    };
+  }, [precomputed, workerEligible]);
+
   // Forward the `workerDebug` prop to the worker client so the whole
   // worker pipeline can be traced from the browser console.
   (0, _react.useEffect)(function () {
@@ -1262,10 +1305,12 @@ function PivotTableUI(props) {
   // match the currently applied precomputed result. While a new computation
   // runs, this snapshot is rendered underneath the loading overlay so the
   // user still sees the previous table (dimmed) instead of a blank area.
+  // `pendingCompute` keeps an inconsistent pair (new props, old result) out of
+  // the snapshot: it may only ever hold a view that was actually rendered.
   var lastGoodViewRef = (0, _react.useRef)(null);
 
   (0, _react.useEffect)(function () {
-    if (!isProcessing && !computeError) {
+    if (!isProcessing && !computeError && !pendingCompute) {
       lastGoodViewRef.current = {
         props: props,
         materializedInput: materializedInput,
@@ -1293,13 +1338,25 @@ function PivotTableUI(props) {
     // result is never applied to the new configuration or dataset.
     activeRequestRef.current += 1;
 
-    if (versionedDataRef.current !== props.data) {
-      versionedDataRef.current = props.data;
-      dataVersionRef.current += 1;
+    // Classic main-thread path (small dataset, worker disabled or unavailable):
+    // the renderer builds its own PivotData synchronously, so precomputing the
+    // same aggregation here would only duplicate the work and keep the loading
+    // overlay on screen for a result nothing is going to read. `attrValues` and
+    // `materializedInput` are handled by the effect above.
+    if (!workerEligible) {
+      if (precomputedRef.current) {
+        precomputedRef.current = null;
+        setPrecomputed(null);
+      }
+      setIsProcessing(false);
+      setResultReady(false);
+      setComputeError(null);
+      return undefined;
     }
 
-    var signature = computeSignature + '#' + dataVersionRef.current;
-    if (precomputedRef.current && precomputedRef.current.signature === signature) {
+    // The result for the current props + data is already available (the data
+    // version was bumped during render, see above).
+    if (precomputedMatches) {
       setIsProcessing(false);
       return undefined;
     }
@@ -1312,14 +1369,21 @@ function PivotTableUI(props) {
     var timer = setTimeout(function () {
       var requestId = activeRequestRef.current;
       var dataKey = instanceIdRef.current + '-data-' + dataVersionRef.current;
-      (0, _PivotDataWorker.computePivotWithFallback)(props.data, dataKey, (0, _pivotCompute.createWorkerConfig)(props)).then(function (result) {
+      (0, _PivotDataWorker.computePivotWithFallback)(props.data, dataKey, (0, _pivotCompute.createWorkerConfig)(props), instanceIdRef.current).then(function (result) {
         if (unmountedRef.current || requestId !== activeRequestRef.current) {
+          (0, _PivotDataWorker.releasePivotInWorker)(result && result.viewportKey);
           return;
         }
-        precomputedRef.current = { signature: signature, data: result };
+        precomputedRef.current = { signature: currentSignature, data: result };
         setPrecomputed(precomputedRef.current);
-        setAttrValues(result.attrValues);
-        setMaterializedInput(result.materializedInput);
+        if (result.attrValues) {
+          setAttrValues(result.attrValues);
+        }
+        (0, _PivotDataWorker.releaseDatasetInWorker)(dataKey);
+        // The worker received this exact array when the request was staged.
+        // Reusing it avoids structured-cloning the full dataset back to the
+        // main thread with every result.
+        setMaterializedInput(props.data);
         setComputeError(null);
         // Keep the overlay up for one more render: `resultReady` makes the
         // fresh table render underneath, and the layout effect above turns
@@ -1336,11 +1400,16 @@ function PivotTableUI(props) {
     return function () {
       clearTimeout(timer);
     };
-  }, [props.data, computeSignature]);
-
-  var sendPropUpdate = function sendPropUpdate(command) {
-    props.onChange((0, _immutabilityHelper2.default)(props, command));
-  };
+  }, [props.data, computeSignature, workerEligible]);
+
+  // Event handlers are referentially stable (they read the latest props from
+  // `propsRef`): a new handler identity on every render would defeat
+  // PivotTable's PureComponent check and re-render the entire table - which is
+  // what makes drag and drop feel frozen on large datasets.
+  var sendPropUpdate = (0, _react.useCallback)(function (command) {
+    var currentProps = propsRef.current;
+    currentProps.onChange((0, _immutabilityHelper2.default)(currentProps, command));
+  }, []);
 
   var propUpdater = function propUpdater(key) {
     return function (value) {
@@ -1526,23 +1595,23 @@ function PivotTableUI(props) {
     });
   };
 
-  var handleColSort = function handleColSort(attr, sortDir) {
+  var handleColSort = (0, _react.useCallback)(function (attr, sortDir) {
     // Only allow sorting 1 column at a time - clear all other column sorts
     var colSorts = {};
     if (sortDir !== null) {
       colSorts[attr] = sortDir;
     }
     sendPropUpdate({ colSorts: { $set: colSorts } });
-  };
+  }, [sendPropUpdate]);
 
-  var handleRowSort = function handleRowSort(attr, sortDir) {
+  var handleRowSort = (0, _react.useCallback)(function (attr, sortDir) {
     // Only allow sorting 1 row at a time - clear all other row sorts
     var rowSorts = {};
     if (sortDir !== null) {
       rowSorts[attr] = sortDir;
     }
     sendPropUpdate({ rowSorts: { $set: rowSorts } });
-  };
+  }, [sendPropUpdate]);
 
   var isOpen = function isOpen(dropdown) {
     return openDropdown === dropdown;
@@ -1597,9 +1666,9 @@ function PivotTableUI(props) {
         return _react2.default.createElement(DraggableAttribute, {
           name: x,
           key: x,
-          attrValues: attrValues[x],
+          attrValues: attrValues[x] || EMPTY_ATTR_VALUES,
           valueFilter: props.valueFilter[x] || {},
-          sorter: (0, _Utilities.getSort)(props.sorters, x, attrValues[x]),
+          sorter: (0, _Utilities.getSort)(props.sorters, x, attrValues[x] || EMPTY_ATTR_VALUES),
           menuLimit: props.menuLimit,
           setValuesInFilter: setValuesInFilter,
           addValuesToFilter: addValuesToFilter,
@@ -1820,11 +1889,47 @@ function PivotTableUI(props) {
 
   // `showProcessing` is a testing hook: when true it forces the loading
   // overlay on top of the table regardless of whether a worker computation
-  // is actually running.
-  var showProcessing = (isProcessing || props.showProcessing) && !computeError;
+  // is actually running. `pendingCompute` means the props/data on screen
+  // already changed while the worker result is still on its way, so the
+  // previous table has to stay visible (with the overlay) until it arrives.
+  var showProcessing = (isProcessing || pendingCompute || props.showProcessing) && !computeError;
   // While recomputing, re-render the last valid table (old props matched to
   // their own precomputed result) so the overlay sits on top of real content.
-  var staleView = showProcessing && !resultReady ? lastGoodViewRef.current : null;
+  // `pendingCompute` - and not the leftover `resultReady` flag of the previous
+  // computation - is what decides this. Relying on `resultReady` let the render
+  // that received new props fall through to the live branch and draw the whole
+  // table with the *previous* result, only to throw it away again on the next
+  // render: two extra full re-renders per change on every drag event.
+  // The element is memoized on purpose: re-creating it on every parent render
+  // would make React re-render every cell of the (potentially huge) table on
+  // each drag event and keystroke, which is what made drag & drop feel frozen.
+  var staleView = pendingCompute ? lastGoodViewRef.current : null;
+  var staleViewElement = (0, _react.useMemo)(function () {
+    if (!staleView) {
+      return null;
+    }
+    return _react2.default.createElement(_PivotTable2.default, _extends({}, staleView.props, {
+      data: staleView.materializedInput,
+      precomputedData: staleView.precomputed ? staleView.precomputed.data : null,
+      colSorts: staleView.props.colSorts || EMPTY_SORTS,
+      rowSorts: staleView.props.rowSorts || EMPTY_SORTS,
+      onColSort: handleColSort,
+      onRowSort: handleRowSort
+    }));
+  }, [staleView, handleColSort, handleRowSort]);
+
+  // Stable identities for the sort maps: an inline `{}` fallback would be a new
+  // object on every render and invalidate PivotTable's PureComponent check.
+  var colSorts = props.colSorts || EMPTY_SORTS;
+  var rowSorts = props.rowSorts || EMPTY_SORTS;
+  var liveViewElement = _react2.default.createElement(_PivotTable2.default, _extends({}, props, {
+    data: materializedInput,
+    precomputedData: workerEligible && precomputed ? precomputed.data : props.precomputedData || null,
+    colSorts: colSorts,
+    rowSorts: rowSorts,
+    onColSort: handleColSort,
+    onRowSort: handleRowSort
+  }));
 
   var outputContent = void 0;
   if (computeError) {
@@ -1843,28 +1948,18 @@ function PivotTableUI(props) {
       )
     );
   } else if (staleView) {
-    outputContent = _react2.default.createElement(_PivotTable2.default, _extends({}, staleView.props, {
-      data: staleView.materializedInput,
-      precomputedData: staleView.precomputed ? staleView.precomputed.data : null,
-      colSorts: staleView.props.colSorts || {},
-      rowSorts: staleView.props.rowSorts || {},
-      onColSort: handleColSort,
-      onRowSort: handleRowSort
-    }));
-  } else if (showProcessing && !resultReady) {
-    // First computation: no previous table to keep visible yet.
+    outputContent = staleViewElement;
+  } else if (pendingCompute) {
+    // First computation, or a change without any previous table to keep
+    // visible: nothing consistent exists yet, so leave the area empty.
     outputContent = _react2.default.createElement('div', { className: 'pvtOutputPlaceholder' });
   } else {
-    outputContent = _react2.default.createElement(_PivotTable2.default, _extends({}, props, {
-      data: materializedInput,
-      precomputedData: workerEligible && precomputed ? precomputed.data : props.precomputedData || null,
-      colSorts: props.colSorts || {},
-      rowSorts: props.rowSorts || {},
-      onColSort: handleColSort,
-      onRowSort: handleRowSort
-    }));
+    outputContent = liveViewElement;
   }
 
+  // Keep the processing layer scoped to the output cell. Rendering it next to
+  // the table made its absolute inset resolve against a much larger ancestor,
+  // which intercepted pointer events across the surrounding application UI.
   var outputCell = _react2.default.createElement(
     'td',
     { className: 'pvtOutput' },
@@ -1873,8 +1968,10 @@ function PivotTableUI(props) {
 
   if (horizUnused) {
     return _react2.default.createElement(
-      _react2.default.Fragment,
-      null,
+      'div',
+      {
+        style: { borderRadius: 5, width: 'max-content', height: 'max-content' }
+      },
       showProcessing ? _react2.default.createElement(PivotLoadingOverlay, null) : null,
       _react2.default.createElement(
         'table',
@@ -1908,8 +2005,8 @@ function PivotTableUI(props) {
   }
 
   return _react2.default.createElement(
-    _react2.default.Fragment,
-    null,
+    'div',
+    { style: { borderRadius: 5, width: 'max-content', height: 'max-content' } },
     showProcessing ? _react2.default.createElement(PivotLoadingOverlay, null) : null,
     _react2.default.createElement(
       'table',