@infinite-table/infinite-react 7.3.6 → 7.4.0

package/index.dev.js

@@ -5695,61 +5695,64 @@ var useColumnPointerEvents = ({
         reorderDragResult = dragger.onMove(e2);
       };
       const onPointerUp = (e2) => {
-        const { multiSortBehavior } = getState();
-        const target2 = domRef.current;
-        rootRef.current?.classList.remove(InfiniteClsShiftingColumns);
-        dragger.stop();
-        brain.update({
-          ...initialAvailableSize
-        });
-        discardAlwaysRenderedColumn?.();
-        restoreRenderRange?.();
-        computedVisibleColumns.forEach((col) => {
-          clearInfiniteColumnReorderDuration(
-            col.computedVisibleIndex,
-            rootRef.current
-          );
-          setInfiniteColumnVisibility(
-            col.computedVisibleIndex,
-            "",
-            rootRef.current
-          );
-          setInfiniteColumnOffsetWhileReordering(
-            col.computedVisibleIndex,
-            "",
+        const pointerId = e2.pointerId;
+        requestAnimationFrame(() => {
+          const { multiSortBehavior } = getState();
+          const target2 = domRef.current;
+          rootRef.current?.classList.remove(InfiniteClsShiftingColumns);
+          dragger.stop();
+          brain.update({
+            ...initialAvailableSize
+          });
+          discardAlwaysRenderedColumn?.();
+          restoreRenderRange?.();
+          computedVisibleColumns.forEach((col) => {
+            clearInfiniteColumnReorderDuration(
+              col.computedVisibleIndex,
+              rootRef.current
+            );
+            setInfiniteColumnVisibility(
+              col.computedVisibleIndex,
+              "",
+              rootRef.current
+            );
+            setInfiniteColumnOffsetWhileReordering(
+              col.computedVisibleIndex,
+              "",
+              rootRef.current
+            );
+          });
+          setInfiniteColumnZIndex(
+            dragColumnIndex,
+            getColumnZIndex(dragColumn, {
+              pinnedStartColsCount: computedPinnedStartColumns.length,
+              visibleColsCount: computedVisibleColumns.length
+            }),
             rootRef.current
           );
-        });
-        setInfiniteColumnZIndex(
-          dragColumnIndex,
-          getColumnZIndex(dragColumn, {
-            pinnedStartColsCount: computedPinnedStartColumns.length,
-            visibleColsCount: computedVisibleColumns.length
-          }),
-          rootRef.current
-        );
-        target2.style.cursor = initialCursor;
-        target2.releasePointerCapture(e2.pointerId);
-        target2.removeEventListener("pointermove", onPointerMove);
-        target2.removeEventListener("pointerup", onPointerUp);
-        setProxyPosition(null);
-        const dragColumnSortable = api.getColumnApi(dragColumn.id)?.isSortable() ?? false;
-        if (!didDragAtLeastOnce && dragColumnSortable) {
-          api.toggleSortingForColumn(dragColumn.id, {
-            multiSortBehavior: multiSortBehavior === "replace" && (e2.ctrlKey || e2.metaKey) ? "append" : multiSortBehavior
-          });
-        }
-        if (reorderDragResult) {
-          persistColumnOrder(reorderDragResult);
-        } else if (didDragAtLeastOnce) {
-          if (allowColumnHideOnDrag) {
-            api.setVisibilityForColumn(dragColumn.id, false);
+          target2.style.cursor = initialCursor;
+          target2.releasePointerCapture(pointerId);
+          target2.removeEventListener("pointermove", onPointerMove);
+          target2.removeEventListener("pointerup", onPointerUp);
+          setProxyPosition(null);
+          const dragColumnSortable = api.getColumnApi(dragColumn.id)?.isSortable() ?? false;
+          if (!didDragAtLeastOnce && dragColumnSortable) {
+            api.toggleSortingForColumn(dragColumn.id, {
+              multiSortBehavior: multiSortBehavior === "replace" && (e2.ctrlKey || e2.metaKey) ? "append" : multiSortBehavior
+            });
           }
-        }
-        actions.columnReorderDragColumnId = false;
-        if (horizontalLayoutPageIndex != null) {
-          actions.columnReorderInPageIndex = null;
-        }
+          if (reorderDragResult) {
+            persistColumnOrder(reorderDragResult);
+          } else if (didDragAtLeastOnce) {
+            if (allowColumnHideOnDrag) {
+              api.setVisibilityForColumn(dragColumn.id, false);
+            }
+          }
+          actions.columnReorderDragColumnId = false;
+          if (horizontalLayoutPageIndex != null) {
+            actions.columnReorderInPageIndex = null;
+          }
+        });
       };
       target.addEventListener("pointermove", onPointerMove);
       target.addEventListener("pointerup", onPointerUp);
@@ -13706,6 +13709,7 @@ function computeReducersFor(data, index, reducers, reducerResults, groupKeys) {
 }
 function lazyGroup(groupParams, rootData) {
   const {
+    marker,
     reducers = {},
     pivot,
     groupBy,
@@ -13714,6 +13718,9 @@ function lazyGroup(groupParams, rootData) {
     cache,
     mappings
   } = groupParams;
+  if (marker) {
+    marker.start();
+  }
   const deepMap = new DeepMap();
   function traverseValues(pivotDeepMap, container, pivot2, pivotIndex = 0, currentPivotKeys2 = []) {
     const last = !pivot2.length || pivotIndex === pivot2.length - 1;
@@ -13845,6 +13852,16 @@ function lazyGroup(groupParams, rootData) {
     result.topLevelPivotColumns = topLevelPivotColumns;
     result.pivot = pivot;
   }
+  if (marker) {
+    marker.end({
+      details: [
+        {
+          name: "Group by fields",
+          value: groupBy.map((group2) => group2.field).join(", ")
+        }
+      ]
+    });
+  }
   return result;
 }
 function processGroup(deepMap, currentGroupKeys, currentPivotKeys, item, itemIndex, pivot, reducers, topLevelPivotColumns, initialReducerValue, defaultToKey = DEFAULT_TO_KEY) {
@@ -13966,7 +13983,18 @@ function processTreeNode(treeParams, deepMap, treePaths, parentPath, item, itemI
   }
 }
 function tree(treeParams, data) {
-  const { reducers } = treeParams;
+  const { reducers, marker } = treeParams;
+  if (marker) {
+    const reducerKeys = Object.keys(reducers ?? {});
+    marker.start({
+      details: reducerKeys.length > 0 ? [
+        {
+          name: "Reducers",
+          value: reducerKeys.join(", ")
+        }
+      ] : void 0
+    });
+  }
   const initialReducerValue = initReducers(reducers);
   const globalReducerResults = deepClone(initialReducerValue);
   const deepMap = new DeepMap();
@@ -14006,15 +14034,22 @@ function tree(treeParams, data) {
     initialData: data,
     reducerResults: globalReducerResults
   };
+  if (marker) {
+    marker.end();
+  }
   return result;
 }
 function group(groupParams, data) {
   const {
+    marker,
     groupBy,
     defaultToKey = DEFAULT_TO_KEY,
     pivot,
     reducers
   } = groupParams;
+  if (marker) {
+    marker.start();
+  }
   const groupByLength = groupBy.length;
   const topLevelPivotColumns = pivot ? new DeepMap() : void 0;
   const deepMap = new DeepMap();
@@ -14144,6 +14179,16 @@ function group(groupParams, data) {
     result.topLevelPivotColumns = topLevelPivotColumns;
     result.pivot = pivot;
   }
+  if (marker) {
+    marker.end({
+      details: [
+        {
+          name: "Group by fields",
+          value: groupBy.map((group2) => group2.field).join(", ")
+        }
+      ]
+    });
+  }
   return result;
 }
 function flatten(groupResult) {
@@ -14438,13 +14483,20 @@ function flattenTreeNodes(dataArray, parentPath, parents, indexInParentNodes, pa
   return result;
 }
 function enhancedTreeFlatten(param) {
-  const { dataArray } = param;
+  const { dataArray, marker } = param;
+  if (marker) {
+    marker.start();
+  }
   const result = [];
   flattenTreeNodes(dataArray, [], [], [], param, result);
+  if (marker) {
+    marker.end();
+  }
   return { data: result };
 }
 function enhancedFlatten(param) {
   const {
+    marker,
     lazyLoad,
     groupResult,
     rowsPerPage,
@@ -14460,6 +14512,16 @@ function enhancedFlatten(param) {
   } = param;
   const { groupParams, deepMap, pivot } = groupResult;
   const { groupBy } = groupParams;
+  if (marker) {
+    marker.start({
+      details: [
+        {
+          name: "Group by fields",
+          value: groupBy.map((g) => g.field).join(", ")
+        }
+      ]
+    });
+  }
   const result = [];
   const groupRowsIndexes = [];
   const parents = [];
@@ -14629,6 +14691,9 @@ function enhancedFlatten(param) {
       indexInParentGroups.pop();
     }
   );
+  if (marker) {
+    marker.end();
+  }
   return {
     data: result,
     groupRowsIndexes
@@ -14752,10 +14817,21 @@ function toPlainSortInfo(sortInfo) {
 }
 var multisort = (sortInfo, array, options) => {
   const get = typeof options === "function" ? options : options?.get;
+  const marker = options && typeof options === "object" ? options.marker : void 0;
+  if (marker) {
+    marker.start();
+  }
   array.sort(getMultisortFunction(toPlainSortInfo(sortInfo), get));
+  if (marker) {
+    marker.end();
+  }
   return array;
 };
 var multisortNested = (sortInfo, array, options) => {
+  const { marker } = options;
+  if (marker) {
+    marker.start();
+  }
   const sortFn = getMultisortFunction(
     toPlainSortInfo(sortInfo),
     options.get
@@ -14805,6 +14881,9 @@ var multisortNested = (sortInfo, array, options) => {
       array = [...array].sort(sortFn);
     }
   }
+  if (marker) {
+    marker.end();
+  }
   return array;
 };
 multisort.knownTypes = sortTypes_default;
@@ -18752,6 +18831,163 @@ function finishRowInfoReducersFor(params) {
   return results;
 }
 
+// src/utils/devTools/index.ts
+var DevToolsMarker = class _DevToolsMarker {
+  constructor(debugId) {
+    this.debugId = debugId;
+    this.markerDetails = {
+      label: "",
+      track: "",
+      trackGroup: void 0,
+      color: void 0,
+      details: [],
+      tooltip: void 0
+    };
+    this.stopped = false;
+    this.start = (startDetails) => {
+      if (this.markerDetails.startTs) {
+        return this;
+      }
+      const start = performance.now();
+      this.markerDetails.details = startDetails?.details ?? [];
+      this.markerDetails.startTs = start;
+      return this;
+    };
+    this.end = (markerDetails = {}) => {
+      if (this.stopped) {
+        return this;
+      }
+      this.stopped = true;
+      const start = markerDetails.startTs ?? this.markerDetails.startTs;
+      const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
+      const color = markerDetails.color || this.markerDetails.color || "primary";
+      const trackGroup = markerDetails.trackGroup || this.markerDetails.trackGroup || `Infinite Table (${this.debugId})`;
+      const details = [
+        ...this.markerDetails.details || [],
+        ...markerDetails.details || []
+      ];
+      const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
+      const label = markerDetails.label || this.markerDetails.label || "Unknown";
+      const track = markerDetails.track || this.markerDetails.track || "Unknown";
+      performance.measure(label, {
+        start,
+        end,
+        detail: {
+          devtools: {
+            dataType: "track-entry",
+            trackGroup,
+            track,
+            color,
+            properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : void 0,
+            tooltipText: tooltip
+          }
+        }
+      });
+      return this;
+    };
+    this.debugId = debugId;
+  }
+  static create(debugId) {
+    return new _DevToolsMarker(debugId);
+  }
+  get startTimestamp() {
+    return this.markerDetails.startTs;
+  }
+  get track() {
+    const self = this;
+    return Object.keys(DevToolsTracks).reduce(
+      (acc, track) => {
+        const trackObj = {
+          start: self.start,
+          end: (markerDetails) => {
+            return self.end({
+              ...markerDetails,
+              track: DevToolsTracks[track].track,
+              label: markerDetails.label
+            });
+          },
+          get label() {
+            const currentTrack = DevToolsTracks[track];
+            return Object.keys(currentTrack.labels).reduce(
+              (labelAcc, label) => {
+                const labelObj = {
+                  start: self.start,
+                  end: (markerDetails) => {
+                    return self.end({
+                      ...markerDetails,
+                      track: currentTrack.track,
+                      label: currentTrack.labels[label]
+                    });
+                  }
+                };
+                Object.defineProperty(labelAcc, label, {
+                  get: () => {
+                    self.markerDetails.label = currentTrack.labels[label];
+                    return labelObj;
+                  }
+                });
+                return labelAcc;
+              },
+              {}
+            );
+          }
+        };
+        Object.defineProperty(acc, track, {
+          get: () => {
+            const currentTrack = DevToolsTracks[track];
+            self.markerDetails.track = currentTrack.track;
+            return trackObj;
+          }
+        });
+        return acc;
+      },
+      {}
+    );
+  }
+};
+var DevToolsTracks = {
+  DataSource: {
+    track: "DataSource",
+    labels: {
+      RemoteDataLoad: "Remote data load",
+      TreeUnfilteredTreePaths: "Computing unfiltered tree paths",
+      Filter: "Filter",
+      Sort: "Sort",
+      Group: "Group",
+      LazyGroup: "Lazy group",
+      Tree: "Tree",
+      FlattenTree: "Flatten tree",
+      Flatten: "Flatten groups",
+      PrepareData: "Preparing data",
+      ComputeSelectionCount: "Computing selection count",
+      ComputeSelectionCountLazy: "Computing selection count (lazy)",
+      PrepareRowInfo: "Preparing row info array"
+    }
+  },
+  InfiniteTable: {
+    track: "InfiniteTable",
+    labels: {
+      Render: "Rendering"
+    }
+  },
+  MatrixBrain: {
+    track: "Layout Computations",
+    labels: {
+      ComputeRenderRange: "Computing render range"
+    }
+  }
+};
+function getMarker(debugId) {
+  return DevToolsMarker.create(debugId);
+}
+
+// src/components/InfiniteTable/types/Utility.ts
+function notNullable(value) {
+  if (value === null || value === void 0) return false;
+  const testDummyForCompileError = value;
+  return true;
+}
+
 // src/components/DataSource/state/reducer.ts
 function cleanupEmptyFilterValues(filterValue, filterTypes) {
   if (!filterValue) {
@@ -18882,6 +19118,7 @@ function filterTreeDataSource(params) {
 function filterDataArray(params) {
   const {
     filterTypes,
+    marker,
     operatorsByFilterType,
     filterFunction,
     toPrimaryKey,
@@ -18891,6 +19128,9 @@ function filterDataArray(params) {
     isLeafNode
   } = params;
   let { dataArray } = params;
+  marker?.start({
+    details: [{ name: "Count before", value: dataArray.length }]
+  });
   if (filterFunction) {
     dataArray = dataArray.filter(
       (data, index, arr) => filterFunction({
@@ -18912,7 +19152,7 @@ function filterDataArray(params) {
   }
   const filterValueArray = cleanupEmptyFilterValues(params.filterValue, filterTypes) || [];
   if (filterValueArray && filterValueArray.length) {
-    return dataArray.filter((data, index, arr) => {
+    const result = dataArray.filter((data, index, arr) => {
       const param = {
         data,
         index,
@@ -18949,11 +19189,24 @@ function filterDataArray(params) {
       }
       return true;
     });
+    marker?.end({
+      details: [{ name: "Count after", value: result.length }]
+    });
+    return result;
   }
+  marker?.end({
+    details: [{ name: "Count after", value: dataArray.length }]
+  });
   return dataArray;
 }
 function concludeReducer(params) {
+  let marker;
   const { state, previousState } = params;
+  const debugId = state.debugId;
+  let rootMarker;
+  if (debugId) {
+    rootMarker = getMarker(debugId).track.DataSource.label.PrepareData.start();
+  }
   const cacheAffectedParts = getCacheAffectedParts(state);
   const sortInfo = state.sortInfo;
   const sortMode = state.sortMode;
@@ -19097,6 +19350,9 @@ function concludeReducer(params) {
   let dataArray = state.originalDataArray;
   if (shouldTree && shouldTreeAgain) {
     const treeParams = {
+      marker: debugId ? getMarker(
+        debugId
+      ).track.DataSource.label.TreeUnfilteredTreePaths.start() : void 0,
       isLeafNode,
       getNodeChildren,
       toKey: toPrimaryKey
@@ -19114,6 +19370,7 @@ function concludeReducer(params) {
         filterTimestamp = Date.now();
       }
       dataArray = filterDataArray({
+        marker: debugId ? getMarker(debugId).track.DataSource.label.Filter.start() : void 0,
         // tree-related stuff
         getNodeChildren,
         isLeafNode,
@@ -19146,11 +19403,21 @@ function concludeReducer(params) {
       if (state.devToolsDetected) {
         sortTimestamp = Date.now();
       }
+      if (debugId) {
+        marker = getMarker(debugId).track.DataSource.label.Sort.start({
+          details: [{ name: "Count", value: dataArray.length }]
+        });
+      }
       if (state.sortFunction) {
         dataArray = state.sortFunction(sortInfo, [...dataArray]);
+        if (marker) {
+          marker.end();
+          marker = void 0;
+        }
       } else {
         if (isTree) {
           dataArray = multisortNested(sortInfo, dataArray, {
+            marker,
             inplace: false,
             isLeafNode,
             getNodeChildren,
@@ -19158,9 +19425,13 @@ function concludeReducer(params) {
             nodesKey
           });
         } else {
-          dataArray = multisort(sortInfo, [...dataArray]);
+          dataArray = multisort(sortInfo, [...dataArray], { marker });
         }
       }
+      if (debugId) {
+        marker?.end();
+        marker = void 0;
+      }
       if (state.devToolsDetected) {
         const sortDuration = Date.now() - sortTimestamp;
         state.debugTimings.set("sort", sortDuration);
@@ -19226,14 +19497,16 @@ function concludeReducer(params) {
           reducers: aggregationReducers,
           indexer: state.indexer,
           toPrimaryKey,
-          cache
+          cache,
+          marker: debugId ? getMarker(debugId).track.DataSource.label.LazyGroup.start() : void 0
         },
         state.originalLazyGroupData
       ) : group(
         {
           groupBy,
           pivot: pivotBy,
-          reducers: aggregationReducers
+          reducers: aggregationReducers,
+          marker: debugId ? getMarker(debugId).track.DataSource.label.Group.start() : void 0
         },
         dataArray
       );
@@ -19267,6 +19540,7 @@ function concludeReducer(params) {
         withRowInfoForCellSelection
       ) : void 0;
       const flattenResult = enhancedFlatten({
+        marker: debugId ? getMarker(debugId).track.DataSource.label.FlattenTree.start() : void 0,
         groupResult,
         lazyLoad: !!state.lazyLoad,
         reducers: aggregationReducers,
@@ -19313,6 +19587,7 @@ function concludeReducer(params) {
       }
       let aggregationReducers = state.aggregationReducers;
       const treeParams = {
+        marker: debugId ? getMarker(debugId).track.DataSource.label.Tree.start() : void 0,
         isLeafNode,
         getNodeChildren,
         toKey: toPrimaryKey,
@@ -19359,6 +19634,7 @@ function concludeReducer(params) {
       } : void 0;
       const repeatWrappedGroupRows = state.rowsPerPage != null ? state.repeatWrappedGroupRows : false;
       const flattenResult = enhancedTreeFlatten({
+        marker: debugId ? getMarker(debugId).track.DataSource.label.FlattenTree.start() : void 0,
         treeResult,
         treeParams,
         dataArray,
@@ -19435,6 +19711,11 @@ function concludeReducer(params) {
   state.reducedAt = now;
   if (state.selectionMode === "multi-row") {
     if (shouldGroup && state.lazyLoad) {
+      if (debugId) {
+        marker = getMarker(
+          debugId
+        ).track.DataSource.label.ComputeSelectionCountLazy.start();
+      }
       let allRowsSelected = true;
       let someRowsSelected = false;
       state.dataArray.forEach((rowInfo) => {
@@ -19453,11 +19734,24 @@ function concludeReducer(params) {
       });
       state.allRowsSelected = allRowsSelected;
       state.someRowsSelected = someRowsSelected;
+      if (debugId) {
+        marker?.end();
+        marker = void 0;
+      }
     } else {
+      if (debugId) {
+        marker = getMarker(
+          debugId
+        ).track.DataSource.label.ComputeSelectionCount.start();
+      }
       const dataArrayCount = state.isTree ? state.totalLeafNodesCount : state.filteredCount;
       const selectedRowCount = state.isTree ? state.treeSelectionState ? state.treeSelectionState.getSelectedCount() : 0 : state.rowSelection.getSelectedCount();
       state.allRowsSelected = dataArrayCount === selectedRowCount;
       state.someRowsSelected = selectedRowCount > 0;
+      if (debugId) {
+        marker?.end();
+        marker = void 0;
+      }
     }
   }
   if (false) {
@@ -19471,6 +19765,33 @@ function concludeReducer(params) {
       treeMutations: treeMutations?.size ? treeMutations : void 0
     };
   }
+  if (rootMarker) {
+    rootMarker?.track.DataSource.label.PrepareData.end({
+      details: [
+        shouldFilterAgain || shouldSortAgain || shouldGroupAgain || shouldTreeAgain ? {
+          name: "Performed operations",
+          value: [
+            shouldFilterAgain ? "filter" : null,
+            shouldSortAgain ? "sort" : null,
+            shouldGroupAgain ? "group" : null,
+            shouldTreeAgain ? "tree" : null
+          ].filter(notNullable).join(", ")
+        } : null,
+        refetchKeyChanged ? {
+          name: "Refetch key",
+          value: `Old ${previousState.refetchKey} -> New ${state.refetchKey}`
+        } : null,
+        originalDataArrayChanged ? {
+          name: "Original data array changed",
+          value: ``
+        } : null,
+        {
+          name: "Unfiltered data length",
+          value: state.originalDataArray.length
+        }
+      ].filter(notNullable)
+    });
+  }
   return state;
 }
 
@@ -20061,6 +20382,12 @@ function useLoadData(options) {
       }
       const componentState2 = getComponentState();
       if (typeof componentState2.data === "function") {
+        let marker;
+        if (componentState2.debugId) {
+          marker = getMarker(
+            componentState2.debugId
+          ).track.DataSource.label.RemoteDataLoad.start();
+        }
         loadData(
           componentState2.data,
           componentState2,
@@ -20069,7 +20396,9 @@ function useLoadData(options) {
             append: appendWhenLivePagination
           },
           masterContext
-        );
+        ).then(() => {
+          marker?.end();
+        });
       }
     },
     { ...depsObject, data }
@@ -21372,13 +21701,6 @@ function realignColumnContextMenu(param) {
   return colId;
 }
 
-// src/components/InfiniteTable/types/Utility.ts
-function notNullable(value) {
-  if (value === null || value === void 0) return false;
-  const testDummyForCompileError = value;
-  return true;
-}
-
 // src/components/types/CellPositionByIndex.ts
 function ensureMinMaxCellPositionByIndex(start, end) {
   let { rowIndex: startRowIndex, colIndex: startColIndex } = start;
@@ -25363,7 +25685,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "7.3.6"
+      version: "7.4.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;