@hrforte/react-pivottable 2.2.0 → 2.2.2

package/README.md

@@ -127,10 +127,22 @@ but the main thread is used. Verify with `workerDebug`:
   `[pivottable worker]` prefix. Logs emitted inside the worker thread are
   forwarded to the page console as well. Can also be enabled globally with
   `window.__PVT_WORKER_DEBUG__ = true`.
-- `isShowProcessing` (`bool`, default `false`): testing/debugging hook. When
+- `showProcessing` (`bool`, default `false`): testing/debugging hook. When
   `true` the loading overlay is forced on top of the table even if nothing is
   being computed, so the `PivotLoadingOverlay` can be inspected without
   generating a large dataset. The overlay shows only a spinner and a label;
   during real computations it is turned off only after the worker has posted
   its result event **and** PivotTableUI has rendered the new table (the
   removal happens before the browser paints, so no empty frame is shown).
+- `showNumericalOrder` (`bool`, default `false`): adds a "No." column in front
+  of the row attributes with the 1-based index of every data row (`1`, `2`,
+  `3`, …). The "No." header cell spans the header rows (row group labels,
+  column attribute rows, aggregator header rows), the row label columns keep
+  their `colSpan`/`rowSpan` alignment and the total rows extend their label
+  over the new column. When multiple aggregations are displayed as rows each
+  rendered row is numbered, so a record listing `Count` and `Sum` consumes two
+  numbers.
+
+```jsx
+<PivotTableUI data={rows} rows={['name']} showNumericalOrder />
+```

package/dist/PivotTableUI.js

@@ -54,6 +54,11 @@ 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 = {};
+
 /* eslint-disable react/prop-types */
 // eslint can't see inherited propTypes!
 
@@ -1127,7 +1132,61 @@ function PivotLoadingOverlay() {
     _react2.default.createElement(
       'div',
       { className: 'pvtLoadingText' },
-      'Processing\u2026'
+      _react2.default.createElement(
+        'span',
+        null,
+        'P'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        'r'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        'o'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        'c'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        'e'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        's'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        's'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        'i'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        'n'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        'g'
+      ),
+      _react2.default.createElement(
+        'span',
+        null,
+        '\u2026'
+      )
     )
   );
 }
@@ -1212,6 +1271,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,
@@ -1223,6 +1290,25 @@ function PivotTableUI(props) {
     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]);
 
+  // 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) {
       return;
@@ -1262,10 +1348,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 +1381,21 @@ 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) {
+      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;
     }
@@ -1316,7 +1412,7 @@ function PivotTableUI(props) {
         if (unmountedRef.current || requestId !== activeRequestRef.current) {
           return;
         }
-        precomputedRef.current = { signature: signature, data: result };
+        precomputedRef.current = { signature: currentSignature, data: result };
         setPrecomputed(precomputedRef.current);
         setAttrValues(result.attrValues);
         setMaterializedInput(result.materializedInput);
@@ -1338,9 +1434,14 @@ function PivotTableUI(props) {
     };
   }, [props.data, computeSignature]);
 
-  var sendPropUpdate = function sendPropUpdate(command) {
-    props.onChange((0, _immutabilityHelper2.default)(props, command));
-  };
+  // 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 +1627,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;
@@ -1818,13 +1919,49 @@ function PivotTableUI(props) {
     return setAxisFromDrag('rows', order);
   }, 'pvtAxisContainer pvtVertList pvtRows');
 
-  // `isShowProcessing` is a testing hook: when true it forces the loading
+  // `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.isShowProcessing) && !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,26 +1980,13 @@ 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;
   }
 
   var outputCell = _react2.default.createElement(
@@ -1951,7 +2075,7 @@ PivotTableUI.propTypes = Object.assign({}, _PivotTable2.default.propTypes, {
   workerThreshold: _propTypes2.default.number,
   workerUrl: _propTypes2.default.string,
   workerDebug: _propTypes2.default.bool,
-  isShowProcessing: _propTypes2.default.bool
+  showProcessing: _propTypes2.default.bool
 });
 
 PivotTableUI.defaultProps = Object.assign({}, _PivotTable2.default.defaultProps, {
@@ -1966,7 +2090,7 @@ PivotTableUI.defaultProps = Object.assign({}, _PivotTable2.default.defaultProps,
   workerThreshold: _pivotCompute.DEFAULT_WORKER_THRESHOLD,
   workerUrl: _PivotDataWorker.DEFAULT_WORKER_URL,
   workerDebug: false,
-  isShowProcessing: false
+  showProcessing: false
 });
 
 exports.default = PivotTableUI;