From 26bfac59f0ade3dbaba62fb396e40d25461a0f29 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Mon, 21 Aug 2023 14:28:20 -0400
Subject: [PATCH] feat(TreeData): add optional Aggregators for Tree Data totals
 calc (#191)

---
 package.json                          |  22 +-
 src/examples/slickgrid/Example28.tsx  | 168 ++++++-
 src/examples/slickgrid/example28.scss |  10 +
 test/cypress.config.ts                |   2 +-
 test/cypress/e2e/example28.cy.ts      | 674 ++++++++++++++++----------
 yarn.lock                             | 118 ++---
 6 files changed, 657 insertions(+), 337 deletions(-)

diff --git a/package.json b/package.json
index f5a3cabe..5e42b9f8 100644
--- a/package.json
+++ b/package.json
@@ -91,11 +91,11 @@
     ]
   },
   "dependencies": {
-    "@slickgrid-universal/common": "3.1.0",
-    "@slickgrid-universal/custom-footer-component": "3.1.0",
-    "@slickgrid-universal/empty-warning-component": "3.1.0",
+    "@slickgrid-universal/common": "3.2.0",
+    "@slickgrid-universal/custom-footer-component": "3.2.0",
+    "@slickgrid-universal/empty-warning-component": "3.2.0",
     "@slickgrid-universal/event-pub-sub": "3.1.0",
-    "@slickgrid-universal/pagination-component": "3.1.0",
+    "@slickgrid-universal/pagination-component": "3.2.0",
     "dequal": "^2.0.3",
     "dompurify": "^3.0.5",
     "font-awesome": "^4.7.0",
@@ -110,13 +110,13 @@
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^7.0.0",
-    "@slickgrid-universal/composite-editor-component": "3.1.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "3.1.0",
-    "@slickgrid-universal/excel-export": "3.1.0",
-    "@slickgrid-universal/graphql": "3.1.0",
-    "@slickgrid-universal/odata": "3.1.0",
-    "@slickgrid-universal/rxjs-observable": "3.1.0",
-    "@slickgrid-universal/text-export": "3.1.0",
+    "@slickgrid-universal/composite-editor-component": "3.2.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "3.2.0",
+    "@slickgrid-universal/excel-export": "3.2.0",
+    "@slickgrid-universal/graphql": "3.2.0",
+    "@slickgrid-universal/odata": "3.2.0",
+    "@slickgrid-universal/rxjs-observable": "3.2.0",
+    "@slickgrid-universal/text-export": "3.2.0",
     "@testing-library/jest-dom": "^6.0.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
diff --git a/src/examples/slickgrid/Example28.tsx b/src/examples/slickgrid/Example28.tsx
index 9728537b..4fa61e2b 100644
--- a/src/examples/slickgrid/Example28.tsx
+++ b/src/examples/slickgrid/Example28.tsx
@@ -1,14 +1,19 @@
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import {
-  SlickgridReactInstance,
+  Aggregators,
   Column,
+  decimalFormatted,
   FieldType,
   Filters,
+  findItemInTreeStructure,
+  Formatter,
   Formatters,
   GridOption,
-  findItemInTreeStructure,
+  isNumber,
+  // GroupTotalFormatters,
+  // italicFormatter,
   SlickgridReact,
-  SlickGrid,
+  SlickgridReactInstance,
   TreeToggledItem,
 } from '../../slickgrid-react';
 import React from 'react';
@@ -25,12 +30,16 @@ interface State extends BaseSlickGridState {
   treeToggleItems: TreeToggledItem[];
   isExcludingChildWhenFiltering: boolean;
   isAutoApproveParentItemWhenTreeColumnIsValid: boolean;
+  isAutoRecalcTotalsOnFilterChange: boolean;
+  isRemoveLastInsertedPopSongDisabled: boolean;
+  lastInsertedPopSongId: number | undefined;
 }
 
 export default class Example28 extends React.Component<Props, State> {
   title = 'Example 28: Tree Data <small>(from a Hierarchical Dataset)</small>';
   subTitle = `<ul>
-    <li><b>NOTE:</b> The grid will automatically sort Ascending with the column that has the Tree Data, you could add a "sortByFieldId" in your column "treeData" option if you wish to sort on a different column</li>
+    <li><b>NOTE #1:</b> The grid will automatically sort Ascending with the column that has the Tree Data, you could add a "sortByFieldId" in your column "treeData" option if you wish to sort on a different column</li>
+    <li><b>NOTE #2:</b> Tree Totals are only calculated once and are <b>NOT</b> recalculated while filtering data, if you do want that feature then you will need to enable <code>autoRecalcTotalsOnFilterChange</code> <i>(see checkbox below)</i></li>
     <li><b>Styling - Salesforce Theme</b></li>
     <ul>
       <li>The Salesforce Theme was created with SASS and compiled in CSS (<a href="https://github.com/slickgrid-universal/slickgrid-universal/blob/master/packages/common/src/styles/slickgrid-theme-salesforce.scss" target="_blank">slickgrid-theme-salesforce.scss</a>), you can override any of its SASS variables</li>
@@ -49,6 +58,9 @@ export default class Example28 extends React.Component<Props, State> {
       datasetHierarchical: undefined,
       isExcludingChildWhenFiltering: false,
       isAutoApproveParentItemWhenTreeColumnIsValid: true,
+      isAutoRecalcTotalsOnFilterChange: false,
+      isRemoveLastInsertedPopSongDisabled: true,
+      lastInsertedPopSongId: undefined,
       isLargeDataset: false,
       hasNoExpandCollapseChanged: true,
       loadingClass: '',
@@ -88,8 +100,44 @@ export default class Example28 extends React.Component<Props, State> {
       {
         id: 'size', name: 'Size', field: 'size', minWidth: 90,
         type: FieldType.number, exportWithFormatter: true,
+        excelExportOptions: { autoDetectCellFormat: false },
         filterable: true, filter: { model: Filters.compoundInputNumber },
-        formatter: (_row, _cell, value) => isNaN(value) ? '' : `${value || 0} MB`,
+
+        // Formatter option #1 (treeParseTotalFormatters)
+        // if you wish to use any of the GroupTotalFormatters (or even regular Formatters), we can do so with the code below
+        // use `treeTotalsFormatter` or `groupTotalsFormatter` to show totals in a Tree Data grid
+        // provide any regular formatters inside the params.formatters
+
+        // formatter: Formatters.treeParseTotals,
+        // treeTotalsFormatter: GroupTotalFormatters.sumTotalsBold,
+        // // groupTotalsFormatter: GroupTotalFormatters.sumTotalsBold,
+        // params: {
+        //   // we can also supply extra params for Formatters/GroupTotalFormatters like min/max decimals
+        //   groupFormatterSuffix: ' MB', minDecimal: 0, maxDecimal: 2,
+        // },
+
+        // OR option #2 (custom Formatter)
+        formatter: (_row, _cell, value, column, dataContext) => {
+          // parent items will a "__treeTotals" property (when creating the Tree and running Aggregation, it mutates all items, all extra props starts with "__" prefix)
+          const fieldId = column.field;
+
+          // Tree Totals, if exists, will be found under `__treeTotals` prop
+          if (dataContext?.__treeTotals !== undefined) {
+            const treeLevel = dataContext[this.state.gridOptions!.treeDataOptions?.levelPropName || '__treeLevel'];
+            const sumVal = dataContext?.__treeTotals?.['sum'][fieldId];
+            const avgVal = dataContext?.__treeTotals?.['avg'][fieldId];
+
+            if (avgVal !== undefined && sumVal !== undefined) {
+              // when found Avg & Sum, we'll display both
+              return isNaN(sumVal) ? '' : `<span class="color-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> / <span class="avg-total">avg: ${decimalFormatted(avgVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
+            } else if (sumVal !== undefined) {
+              // or when only Sum is aggregated, then just show Sum
+              return isNaN(sumVal) ? '' : `<span class="color-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
+            }
+          }
+          // reaching this line means it's a regular dataContext without totals, so regular formatter output will be used
+          return !isNumber(value) ? '' : `${value} MB`;
+        },
       },
     ];
 
@@ -123,7 +171,20 @@ export default class Example28 extends React.Component<Props, State> {
         // initialSort: {
         //   columnId: 'file',
         //   direction: 'DESC'
-        // }
+        // },
+
+        // Aggregators are also supported and must always be an array even when single one is provided
+        // Note: only 5 are currently supported: Avg, Sum, Min, Max and Count
+        // Note 2: also note that Avg Aggregator will automatically give you the "avg", "count" and "sum" so if you need these 3 then simply calling Avg will give you better perf
+        // aggregators: [new Aggregators.Sum('size')]
+        aggregators: [new Aggregators.Avg('size'), new Aggregators.Sum('size') /* , new Aggregators.Min('size'), new Aggregators.Max('size') */],
+
+        // should we auto-recalc Tree Totals (when using Aggregators) anytime a filter changes
+        // it is disabled by default for perf reason, by default it will only calculate totals on first load
+        autoRecalcTotalsOnFilterChange: this.state.isAutoRecalcTotalsOnFilterChange,
+
+        // add optional debounce time to limit number of execution that recalc is called, mostly useful on large dataset
+        // autoRecalcTotalsDebounce: 250
       },
       // change header/cell row height for salesforce theme
       headerRowHeight: 35,
@@ -154,6 +215,19 @@ export default class Example28 extends React.Component<Props, State> {
     return true;
   }
 
+  changeAutoRecalcTotalsOnFilterChange() {
+    const isAutoRecalcTotalsOnFilterChange = !this.state.isAutoRecalcTotalsOnFilterChange;
+    this.setState((state: State) => ({ ...state, isAutoRecalcTotalsOnFilterChange }));
+
+    this.state.gridOptions!.treeDataOptions!.autoRecalcTotalsOnFilterChange = isAutoRecalcTotalsOnFilterChange;
+    this.reactGrid.slickGrid.setOptions(this.state.gridOptions!);
+
+    // since it doesn't take current filters in consideration, we better clear them
+    this.reactGrid.filterService.clearFilters();
+    this.reactGrid.treeDataService.enableAutoRecalcTotalsFeature();
+    return true;
+  }
+
   changeExcludeChildWhenFiltering() {
     const isExcludingChildWhenFiltering = !this.state.isExcludingChildWhenFiltering;
     this.setState((state: State) => ({ ...state, isExcludingChildWhenFiltering }));
@@ -177,7 +251,7 @@ export default class Example28 extends React.Component<Props, State> {
     this.reactGrid.filterService.updateFilters([{ columnId: 'file', searchTerms: [val] }], true, false, true);
   }
 
-  treeFormatter(_row: number, _cell: number, value: any, _columnDef: Column, dataContext: any, grid: SlickGrid) {
+  treeFormatter: Formatter = (_row, _cell, value, _columnDef, dataContext, grid) => {
     const gridOptions = grid.getOptions() as GridOption;
     const treeLevelPropName = gridOptions.treeDataOptions && gridOptions.treeDataOptions.levelPropName || '__treeLevel';
     if (value === null || value === undefined || dataContext === undefined) {
@@ -192,7 +266,7 @@ export default class Example28 extends React.Component<Props, State> {
     value = value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
     const spacer = `<span style="display:inline-block; width:${(15 * dataContext[treeLevelPropName])}px;"></span>`;
 
-    if (data[idx + 1] && data[idx + 1][treeLevelPropName] > data[idx][treeLevelPropName]) {
+    if (data[idx + 1]?.[treeLevelPropName] > data[idx][treeLevelPropName] || data[idx]['__hasChildren']) {
       const folderPrefix = `<span class="text-warning fa ${dataContext.__collapsed ? 'fa-folder' : 'fa-folder-open'}"></span>`;
       if (dataContext.__collapsed) {
         return `${spacer} <span class="slick-group-toggle collapsed" level="${dataContext[treeLevelPropName]}"></span>${folderPrefix} ${prefix}&nbsp;${value}`;
@@ -202,7 +276,7 @@ export default class Example28 extends React.Component<Props, State> {
     } else {
       return `${spacer} <span class="slick-group-toggle" level="${dataContext[treeLevelPropName]}"></span>${prefix}&nbsp;${value}`;
     }
-  }
+  };
 
   getFileIcon(value: string) {
     let prefix = '';
@@ -223,31 +297,61 @@ export default class Example28 extends React.Component<Props, State> {
    * After adding the item, it will sort by parent/child recursively
    */
   addNewFile() {
-    const newId = this.reactGrid.dataView.getLength() + 100;
+    const newId = this.reactGrid.dataView.getLength() + 50;
 
     // find first parent object and add the new item as a child
     const tmpDatasetHierarchical = [...this.state?.datasetHierarchical ?? []];
-    const popItem = findItemInTreeStructure(tmpDatasetHierarchical, x => x.file === 'pop', 'files');
+    const popFolderItem = findItemInTreeStructure(tmpDatasetHierarchical, x => x.file === 'pop', 'files');
 
-    if (popItem && Array.isArray(popItem.files)) {
-      popItem.files.push({
+    if (popFolderItem && Array.isArray(popFolderItem.files)) {
+      popFolderItem.files.push({
         id: newId,
         file: `pop-${newId}.mp3`,
         dateModified: new Date(),
-        size: Math.floor(Math.random() * 100) + 50,
+        size: newId + 3,
       });
+      this.setState((state: State) => ({
+        ...state,
+        lastInsertedPopSongId: newId,
+        isRemoveLastInsertedPopSongDisabled: false,
 
-      // overwrite hierarchical dataset which will also trigger a grid sort and rendering
-      this.setState((state: State) => ({ ...state, datasetHierarchical: tmpDatasetHierarchical }));
+        // overwrite hierarchical dataset which will also trigger a grid sort and rendering
+        datasetHierarchical: tmpDatasetHierarchical,
+      }));
 
       // scroll into the position, after insertion cycle, where the item was added
       setTimeout(() => {
-        const rowIndex = this.reactGrid.dataView.getRowById(popItem.id) as number;
+        const rowIndex = this.reactGrid.dataView.getRowById(popFolderItem.id) as number;
         this.reactGrid.slickGrid.scrollRowIntoView(rowIndex + 3);
       }, 10);
     }
   }
 
+  deleteFile() {
+    const tmpDatasetHierarchical = [...this.state?.datasetHierarchical ?? []];
+    const popFolderItem = findItemInTreeStructure(tmpDatasetHierarchical, x => x.file === 'pop', 'files');
+    const songItemFound = findItemInTreeStructure(tmpDatasetHierarchical, x => x.id === this.state.lastInsertedPopSongId, 'files');
+
+    if (popFolderItem && songItemFound) {
+      const songIdx = popFolderItem.files.findIndex((f: any) => f.id === songItemFound.id);
+      if (songIdx >= 0) {
+        popFolderItem.files.splice(songIdx, 1);
+        this.setState((state: State) => ({
+          ...state,
+          lastInsertedPopSongId: undefined,
+          isRemoveLastInsertedPopSongDisabled: true,
+
+          // overwrite hierarchical dataset which will also trigger a grid sort and rendering
+          datasetHierarchical: tmpDatasetHierarchical,
+        }));
+      }
+    }
+  }
+
+  clearFilters() {
+    this.reactGrid.filterService.clearFilters();
+  }
+
   collapseAll() {
     this.reactGrid.treeDataService.toggleTreeDataCollapse(true);
   }
@@ -275,12 +379,15 @@ export default class Example28 extends React.Component<Props, State> {
             id: 4, file: 'pdf', files: [
               { id: 22, file: 'map2.pdf', dateModified: '2015-07-21T08:22:00.123Z', size: 2.9, },
               { id: 5, file: 'map.pdf', dateModified: '2015-05-21T10:22:00.123Z', size: 3.1, },
-              { id: 6, file: 'internet-bill.pdf', dateModified: '2015-05-12T14:50:00.123Z', size: 1.4, },
-              { id: 23, file: 'phone-bill.pdf', dateModified: '2015-05-01T07:50:00.123Z', size: 1.4, },
+              { id: 6, file: 'internet-bill.pdf', dateModified: '2015-05-12T14:50:00.123Z', size: 1.3, },
+              { id: 23, file: 'phone-bill.pdf', dateModified: '2015-05-01T07:50:00.123Z', size: 1.5, },
             ]
           },
-          { id: 9, file: 'misc', files: [{ id: 10, file: 'todo.txt', dateModified: '2015-02-26T16:50:00.123Z', size: 0.4, }] },
-          { id: 7, file: 'xls', files: [{ id: 8, file: 'compilation.xls', description: 'movie compilation', dateModified: '2014-10-02T14:50:00.123Z', size: 2.3, }] },
+          { id: 9, file: 'misc', files: [{ id: 10, file: 'warranties.txt', dateModified: '2015-02-26T16:50:00.123Z', size: 0.4, }] },
+          { id: 7, file: 'xls', files: [{ id: 8, file: 'compilation.xls', dateModified: '2014-10-02T14:50:00.123Z', size: 2.3, }] },
+          { id: 55, file: 'unclassified.csv', dateModified: '2015-04-08T03:44:12.333Z', size: 0.25, },
+          { id: 56, file: 'unresolved.csv', dateModified: '2015-04-03T03:21:12.000Z', size: 0.79, },
+          { id: 57, file: 'zebra.dll', dateModified: '2016-12-08T13:22:12.432', size: 1.22, },
         ]
       },
       {
@@ -291,8 +398,9 @@ export default class Example28 extends React.Component<Props, State> {
               id: 14, file: 'pop', files: [
                 { id: 15, file: 'theme.mp3', description: 'Movie Theme Song', dateModified: '2015-03-01T17:05:00Z', size: 47, },
                 { id: 25, file: 'song.mp3', description: 'it is a song...', dateModified: '2016-10-04T06:33:44Z', size: 6.3, }
-              ]
+              ],
             },
+            { id: 33, file: 'other', files: [] }
           ]
         }]
       },
@@ -327,6 +435,10 @@ export default class Example28 extends React.Component<Props, State> {
               <span className="fa fa-plus me-1"></span>
               <span>Add New Pop Song</span>
             </button>
+            <button onClick={() => this.deleteFile()} data-test="remove-item-btn" className="btn btn-outline-secondary btn-sm" disabled={this.state.isRemoveLastInsertedPopSongDisabled}>
+              <span className="fa fa-minus me-1"></span>
+              <span>Remove Last Inserted Pop Song</span>
+            </button>
             <button onClick={() => this.collapseAll()} data-test="collapse-all-btn" className="btn btn-outline-secondary btn-sm mx-1">
               <span className="fa fa-compress me-1"></span>
               <span>Collapse All</span>
@@ -335,6 +447,10 @@ export default class Example28 extends React.Component<Props, State> {
               <span className="fa fa-expand me-1"></span>
               <span>Expand All</span>
             </button>
+            <button className='btn btn-outline-secondary btn-sm' data-test="clear-filters-btn" onClick={() => this.reactGrid.filterService.clearFilters()}>
+              <span className="fa fa-close me-1"></span>
+              <span>Clear Filters</span>
+            </button>
             <button onClick={() => this.logFlatStructure()} className="btn btn-outline-secondary btn-sm mx-1">
               <span>Log Flat Structure</span>
             </button>
@@ -374,6 +490,14 @@ export default class Example28 extends React.Component<Props, State> {
               Skip Other Filter Criteria when Parent with Tree is valid
             </span>
           </label>
+          <label className="checkbox-inline control-label" htmlFor="autoRecalcTotalsOnFilterChange" style={{ marginLeft: '20px' }}>
+            <input type="checkbox" id="autoRecalcTotalsOnFilterChange" data-test="auto-recalc-totals" className="me-1"
+              defaultChecked={this.state.isAutoRecalcTotalsOnFilterChange}
+              onClick={() => this.changeAutoRecalcTotalsOnFilterChange()} />
+            <span title="Should we recalculate Tree Data Totals (when Aggregators are defined) while filtering? This feature is disabled by default.">
+              auto-recalc Tree Data totals on filter changed
+            </span>
+          </label>
         </div>
 
         <br />
diff --git a/src/examples/slickgrid/example28.scss b/src/examples/slickgrid/example28.scss
index 60f4c62f..58348071 100644
--- a/src/examples/slickgrid/example28.scss
+++ b/src/examples/slickgrid/example28.scss
@@ -7,6 +7,16 @@
     width: 1.5rem;
 }
 
+.avg-total {
+  color: #ac76ff;
+}
+.bold {
+  font-weight: bold;
+}
+.total-suffix {
+  margin-left: 10px;
+}
+
 /** You can use the following code OR use the .color-x CSS classes */
 
 // .icon.mdi-file-pdf-outline {
diff --git a/test/cypress.config.ts b/test/cypress.config.ts
index 415edc04..9dd8f1b0 100644
--- a/test/cypress.config.ts
+++ b/test/cypress.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
   projectId: 'wmnjof',
   video: false,
   viewportWidth: 1200,
-  viewportHeight: 950,
+  viewportHeight: 1020,
   fixturesFolder: 'test/cypress/fixtures',
   screenshotsFolder: 'test/cypress/screenshots',
   videosFolder: 'test/cypress/videos',
diff --git a/test/cypress/e2e/example28.cy.ts b/test/cypress/e2e/example28.cy.ts
index 21b74d3f..bd0238ab 100644
--- a/test/cypress/e2e/example28.cy.ts
+++ b/test/cypress/e2e/example28.cy.ts
@@ -1,323 +1,509 @@
 describe('Example 28 - Tree Data (from a Hierarchical Dataset)', { retries: 1 }, () => {
   const GRID_ROW_HEIGHT = 33;
   const titles = ['Files', 'Date Modified', 'Description', 'Size'];
-  // const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'todo.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf', 'txt', 'todo.txt', 'xls', 'compilation.xls', 'music', 'mp3', 'pop', 'song.mp3', 'theme.mp3', 'rock', 'soft.mp3', 'something.txt'];
-  // const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt', 'pdf', 'phone-bill.pdf', 'map2.pdf', 'map.pdf', 'internet-bill.pdf', 'misc', 'todo.txt', 'bucket-list.txt'];
-  const defaultGridPresetWithoutPdfDocs = ['bucket-list.txt', 'documents', 'misc', 'todo.txt', 'pdf', 'txt', 'todo.txt', 'xls', 'compilation.xls'];
-  const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'todo.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf'];
-  const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt'];
-  const defaultSortDescListWithExtraSongs = ['something.txt', 'recipes', 'coffee-cake', 'chocolate-cake', 'cheesecake', 'music', 'mp3', 'rock', 'soft.mp3', 'pop', 'theme.mp3', 'song.mp3', 'pop-126.mp3', 'pop-125.mp3', 'documents', 'xls'];
-  const popMusicWith3ExtraSongs = ['music', 'mp3', 'pop', 'pop-125.mp3', 'pop-126.mp3', 'pop-127.mp3', 'song.mp3', 'theme.mp3',];
-
-  it('should display Example title', () => {
-    cy.visit(`${Cypress.config('baseUrl')}/example28`);
-    cy.get('h2').should('contain', 'Example 28: Tree Data');
-    cy.get('h2').should('contain', 'from a Hierarchical Dataset');
-  });
+  // const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'warranties.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf', 'txt', 'todo.txt', 'unclassified.csv', 'unresolved.csv', 'xls', 'compilation.xls', 'music', 'mp3', 'other', 'pop', 'song.mp3', 'theme.mp3', 'rock', 'soft.mp3', 'something.txt'];
+  // const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'other', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt', 'unclassified.csv', 'unresolved.csv', 'pdf', 'phone-bill.pdf', 'map2.pdf', 'map.pdf', 'internet-bill.pdf', 'misc', 'todo.txt', 'bucket-list.txt'];
+  const defaultGridPresetWithoutPdfDocs = ['bucket-list.txt', 'documents', 'misc', 'warranties.txt', 'pdf', 'txt', 'todo.txt', 'unclassified.csv', 'unresolved.csv', 'xls', 'compilation.xls'];
+  const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'warranties.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf'];
+  // const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'other', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt'];
+  const defaultSortDescListWithExtraSongs = ['something.txt', 'recipes', 'coffee-cake', 'chocolate-cake', 'cheesecake', 'music', 'mp3', 'rock', 'soft.mp3', 'pop', 'theme.mp3', 'song.mp3', 'pop-80.mp3', 'pop-79.mp3', 'other', 'documents', 'xls'];
+  const popMusicWith3ExtraSongs = ['music', 'mp3', 'other', 'pop', 'pop-79.mp3', 'pop-80.mp3', 'pop-81.mp3', 'song.mp3', 'theme.mp3',];
+  const popMusicWith3ExtraSongsWithoutEmpty = ['music', 'mp3', 'pop', 'pop-79.mp3', 'pop-80.mp3', 'pop-81.mp3', 'song.mp3', 'theme.mp3',];
+
+  describe('without Auto-Recalc feature', () => {
+    it('should display Example title', () => {
+      cy.visit(`${Cypress.config('baseUrl')}/example28`);
+      cy.get('h2').should('contain', 'Example 28: Tree Data');
+      cy.get('h2').should('contain', 'from a Hierarchical Dataset');
+    });
 
-  it('should have exact column titles on 1st grid', () => {
-    cy.get('#slickGridContainer-grid28')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => expect($child.text()).to.eq(titles[index]));
-  });
+    it('should have exact column titles on 1st grid', () => {
+      cy.get('#slickGridContainer-grid28')
+        .find('.slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(titles[index]));
+    });
 
-  it('should expect the "pdf" folder to be closed by the collapsed items grid preset', () => {
-    cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'pdf');
-    cy.get(`.slick-group-toggle.collapsed`).should('have.length', 1);
+    it('should expect the "pdf" folder to be closed by the collapsed items grid preset with aggregators of Sum(8.8MB) / Avg(2.2MB)', () => {
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'pdf');
+      cy.get(`.slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 8.8 MB / avg: 2.2 MB');
 
-    defaultGridPresetWithoutPdfDocs.forEach((_colName, rowIdx) => {
-      if (rowIdx < defaultGridPresetWithoutPdfDocs.length - 1) {
-        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultGridPresetWithoutPdfDocs[rowIdx]);
-      }
+      defaultGridPresetWithoutPdfDocs.forEach((_colName, rowIdx) => {
+        if (rowIdx < defaultGridPresetWithoutPdfDocs.length - 1) {
+          cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultGridPresetWithoutPdfDocs[rowIdx]);
+        }
+      });
     });
-  });
 
-  it('should expand "pdf" folder and expect all folders to be expanded', () => {
-    cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`)
-      .click();
+    it('should have documents folder with aggregation of Sum(14.46MB) / Avg(1.45MB)', () => {
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'documents');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 14.46 MB / avg: 1.45 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'misc');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.4 MB / avg: 0.4 MB');
+    });
 
-    cy.get('.slick-viewport-top.slick-viewport-left')
-      .scrollTo('top', { force: true } as any);
-  });
+    it('should expand "pdf" folder and expect all folders to be expanded', () => {
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`)
+        .click();
 
-  it('should have default Files list', () => {
-    defaultSortAscList.forEach((_colName, rowIdx) => {
-      if (rowIdx > defaultSortAscList.length - 1) {
-        return;
-      }
-      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]);
+      cy.get('.slick-viewport-top.slick-viewport-left')
+        .scrollTo('top', { force: true } as any);
     });
-  });
 
-  it('should be able to add 2 new pop songs into the Music folder', () => {
-    cy.get('[data-test=add-item-btn]')
-      .contains('Add New Pop Song')
-      .click();
+    it('should have default Files list', () => {
+      defaultSortAscList.forEach((_colName, rowIdx) => {
+        if (rowIdx > defaultSortAscList.length - 1) {
+          return;
+        }
+        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]);
+      });
+    });
 
-    cy.get('.slick-group-toggle[level=3]')
-      .get('.slick-cell')
-      .contains('pop-125.mp3');
+    it('should have pop songs folder with aggregations of Sum(53.3MB) / Avg(26.65MB)', () => {
+      cy.get('.slick-viewport-top.slick-viewport-left')
+        .scrollTo('center', { force: true } as any);
 
-    cy.get('[data-test=add-item-btn]')
-      .contains('Add New Pop Song')
-      .click()
-      .wait(50);
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 151.3 MB / avg: 50.43 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 151.3 MB / avg: 50.43 MB');
+      // next folder is "other" and is empty without aggregations
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 53.3 MB / avg: 26.65 MB');
+    });
 
-    cy.get('.slick-group-toggle[level=3]')
-      .get('.slick-cell')
-      .contains('pop-126.mp3');
-  });
+    it('should be able to add 2 new pop songs into the Music folder', () => {
+      cy.get('[data-test=add-item-btn]')
+        .contains('Add New Pop Song')
+        .click()
+        .click();
 
-  it('should filter the Files column with the word "map" and expect only 4 rows left', () => {
-    const filteredFiles = ['documents', 'pdf', 'map.pdf', 'map2.pdf'];
-    const filteredSizes = ['', '', '3.1', '2.9'];
+      cy.get('.slick-group-toggle[level=3]')
+        .get('.slick-cell')
+        .contains('pop-79.mp3');
 
-    cy.get('.search-filter.filter-file')
-      .type('map');
+      cy.get('.slick-group-toggle[level=3]')
+        .get('.slick-cell')
+        .contains('pop-80.mp3');
 
-    cy.get('#slickGridContainer-grid28')
-      .find('.slick-row')
-      .each(($row, index) => {
-        cy.wrap($row).children('.slick-cell:nth(0)').should('contain', filteredFiles[index]);
-        cy.wrap($row).children('.slick-cell:nth(3)').should('contain', filteredSizes[index]);
-      });
-  });
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 20}px"] > .slick-cell:nth(3)`).should('contain', '82 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 21}px"] > .slick-cell:nth(3)`).should('contain', '83 MB');
 
-  it('should add filter with "Size < 3" and expect 3 rows left', () => {
-    const filteredFiles = ['documents', 'pdf', 'map2.pdf'];
+    });
 
-    cy.get('.search-filter.filter-size')
-      .find('input')
-      .type('3');
+    it('should have pop songs folder with updated aggregations including new pop songs of Sum(218.3MB) / Avg(54.58MB)', () => {
+      cy.get('.slick-viewport-top.slick-viewport-left')
+        .scrollTo('bottom', { force: true } as any);
 
-    cy.get('.search-filter.filter-size')
-      .find('.input-group-addon.operator select')
-      .select('<');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB');
+      // next folder is "other" and is empty without aggregations
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB');
+    });
 
-    cy.get('#slickGridContainer-grid28')
-      .find('.slick-row .slick-cell:nth(0)')
-      .each(($cell, index) => {
-        expect($cell.text().trim()).to.contain(filteredFiles[index]);
-      });
-  });
+    it('should filter the Files column with the word "map" and expect only 4 rows left', () => {
+      const filteredFiles = ['documents', 'pdf', 'map.pdf', 'map2.pdf'];
+      const filteredSizes = ['', '', '3.1', '2.9'];
+
+      cy.get('.search-filter.filter-file')
+        .type('map');
+
+      cy.get('#slickGridContainer-grid28')
+        .find('.slick-row')
+        .each(($row, index) => {
+          cy.wrap($row).children('.slick-cell:nth(0)').should('contain', filteredFiles[index]);
+          cy.wrap($row).children('.slick-cell:nth(3)').should('contain', filteredSizes[index]);
+        });
+    });
 
-  it('should add filter with Size >3 and expect 3 rows left', () => {
-    const filteredFiles = ['documents', 'pdf', 'map.pdf'];
+    it('should add filter with "Size < 3" and expect 3 rows left', () => {
+      const filteredFiles = ['documents', 'pdf', 'map2.pdf'];
 
-    cy.get('.search-filter.filter-size')
-      .find('.input-group-addon.operator select')
-      .select('>');
+      cy.get('.search-filter.filter-size')
+        .find('input')
+        .type('3');
 
-    cy.get('#slickGridContainer-grid28')
-      .find('.slick-row .slick-cell:nth(0)')
-      .each(($cell, index) => {
-        expect($cell.text().trim()).to.contain(filteredFiles[index]);
+      cy.get('.search-filter.filter-size')
+        .find('.input-group-addon.operator select')
+        .select('<');
+
+      cy.get('#slickGridContainer-grid28')
+        .find('.slick-row .slick-cell:nth(0)')
+        .each(($cell, index) => {
+          expect($cell.text().trim()).to.contain(filteredFiles[index]);
+        });
+    });
+
+    it('should add filter with Size >3 and expect 3 rows left', () => {
+      const filteredFiles = ['documents', 'pdf', 'map.pdf'];
+
+      cy.get('.search-filter.filter-size')
+        .find('.input-group-addon.operator select')
+        .select('>');
+
+      cy.get('#slickGridContainer-grid28')
+        .find('.slick-row .slick-cell:nth(0)')
+        .each(($cell, index) => {
+          expect($cell.text().trim()).to.contain(filteredFiles[index]);
+        });
+    });
+
+    it('should add filter with Size <=3.1 and expect 3 rows left', () => {
+      const filteredFiles = ['documents', 'pdf', 'map.pdf', 'map2.pdf'];
+
+      cy.get('.search-filter.filter-size')
+        .find('input')
+        .type('.1');
+
+      cy.get('.search-filter.filter-size')
+        .find('.input-group-addon.operator select')
+        .select('<=');
+
+      cy.get('#slickGridContainer-grid28')
+        .find('.slick-row .slick-cell:nth(0)')
+        .each(($cell, index) => {
+          expect($cell.text().trim()).to.contain(filteredFiles[index]);
+        });
+    });
+
+    it('should Clear all Filters and expect default list', () => {
+      cy.get('#slickGridContainer-grid28')
+        .find('button.slick-grid-menu-button')
+        .trigger('click')
+        .click({ force: true });
+
+      cy.get(`.slick-grid-menu:visible`)
+        .find('.slick-menu-item')
+        .first()
+        .find('span')
+        .contains('Clear all Filters')
+        .click({ force: true });
+
+      defaultSortAscList.forEach((_colName, rowIdx) => {
+        if (rowIdx < defaultSortAscList.length - 1) {
+          cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]);
+        }
       });
-  });
+    });
 
-  it('should add filter with Size <=3.1 and expect 3 rows left', () => {
-    const filteredFiles = ['documents', 'pdf', 'map.pdf', 'map2.pdf'];
+    it('should click on "Files" column to sort descending', () => {
+      cy.get('.slick-header-columns .slick-header-column:nth(0)')
+        .click();
+
+      defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => {
+        if (rowIdx < defaultSortDescListWithExtraSongs.length - 1) {
+          cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]);
+        }
+      });
+    });
 
-    cy.get('.search-filter.filter-size')
-      .find('input')
-      .type('.1');
+    it('should filter the Files by the input search string and expect 4 rows and 1st column to have ', () => {
+      const filteredFiles = ['documents', 'pdf', 'map2.pdf', 'map.pdf'];
 
-    cy.get('.search-filter.filter-size')
-      .find('.input-group-addon.operator select')
-      .select('<=');
+      cy.get('[data-test=search-string]')
+        .type('map');
 
-    cy.get('#slickGridContainer-grid28')
-      .find('.slick-row .slick-cell:nth(0)')
-      .each(($cell, index) => {
-        expect($cell.text().trim()).to.contain(filteredFiles[index]);
+      cy.get('.search-filter.filter-file')
+        .should(($input) => {
+          expect($input.val()).to.eq('map');
+        });
+
+      cy.get('#slickGridContainer-grid28')
+        .find('.slick-row .slick-cell:nth(0)')
+        .each(($cell, index) => {
+          expect($cell.text().trim()).to.contain(filteredFiles[index]);
+        });
+    });
+
+    it('should clear search string and expect default list', () => {
+      cy.get('[data-test=clear-search-string]')
+        .click();
+
+      defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => {
+        if (rowIdx < defaultSortDescListWithExtraSongs.length - 1) {
+          cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]);
+        }
       });
-  });
+    });
 
-  it('should Clear all Filters and default list', () => {
-    cy.get('#slickGridContainer-grid28')
-      .find('button.slick-grid-menu-button')
-      .click({ force: true });
+    it('should be able to add a 3rd new pop song into the Music folder and see it show up in the UI', () => {
+      cy.get('[data-test=add-item-btn]')
+        .contains('Add New Pop Song')
+        .click();
 
-    cy.get(`.slick-grid-menu:visible`)
-      .find('.slick-menu-item')
-      .first()
-      .find('span')
-      .contains('Clear all Filters')
-      .click();
+      cy.get('.slick-group-toggle[level=3]')
+        .get('.slick-cell')
+        .contains('pop-81.mp3');
 
-    defaultSortAscList.forEach((_colName, rowIdx) => {
-      if (rowIdx < defaultSortAscList.length - 1) {
-        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]);
-      }
+      cy.get('.slick-group-toggle[level=3]')
+        .get('.slick-cell')
+        .contains('pop-81.mp3');
     });
-  });
 
-  it('should click on "Files" column to sort descending', () => {
-    cy.get('#slickGridContainer-grid28')
-      .find('.slick-header-column')
-      .first()
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-header-menu')
-      .should('be.visible')
-      .children('.slick-menu-item:nth-of-type(4)')
-      .children('.slick-menu-content')
-      .should('contain', 'Sort Descending')
-      .click();
-
-    cy.wait(5);
-
-    defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => {
-      if (rowIdx < defaultSortDescListWithExtraSongs.length - 1) {
-        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]);
-      }
+    it('should have pop songs folder with updated aggregations including 4 pop songs of Sum(400.3MB) / Avg(66.72MB)', () => {
+      cy.get('.slick-viewport-top.slick-viewport-left')
+        .scrollTo('bottom', { force: true } as any);
+
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB');
+      // next folder is "other" and is empty without aggregations
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 302.3 MB / avg: 60.46 MB');
     });
-  });
 
-  it('should filter the Files by the input search string and expect 4 rows and 1st column to have ', () => {
-    const filteredFiles = ['documents', 'pdf', 'map2.pdf', 'map.pdf'];
+    it('should return 8 rows when filtering the word "pop" music without excluding children', () => {
+      cy.get('.search-filter.filter-file')
+        .type('pop');
 
-    cy.get('[data-test=search-string]')
-      .type('map');
+      cy.get('.right-footer .item-count')
+        .contains('8');
 
-    cy.get('.search-filter.filter-file')
-      .should(($input) => {
-        expect($input.val()).to.eq('map');
+      popMusicWith3ExtraSongsWithoutEmpty.forEach((_colName, rowIdx) => {
+        if (rowIdx < popMusicWith3ExtraSongsWithoutEmpty.length - 1) {
+          cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongsWithoutEmpty[rowIdx]);
+        }
       });
+    });
 
-    cy.get('#slickGridContainer-grid28')
-      .find('.slick-row .slick-cell:nth(0)')
-      .each(($cell, index) => {
-        expect($cell.text().trim()).to.contain(filteredFiles[index]);
+    it('should return 6 rows when using same filter "pop" music AND selecting checkbox to "Exclude Children when Filtering Tree"', () => {
+      cy.get('[data-test="exclude-child-when-filtering"]')
+        .check();
+
+      cy.get('.right-footer .item-count')
+        .contains('6');
+
+      popMusicWith3ExtraSongsWithoutEmpty.forEach((_colName, rowIdx) => {
+        if (rowIdx < popMusicWith3ExtraSongsWithoutEmpty.length - 3) {
+          cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongsWithoutEmpty[rowIdx]);
+        }
       });
-  });
+    });
+
+    it('should change filter to the word "music" and expect only 1 row (the music folder) to show up when still Excluding Children from the Tree', () => {
+      cy.get('#slickGridContainer-grid28')
+        .find('button.slick-grid-menu-button')
+        .click();
+
+      cy.get('.slick-grid-menu:visible')
+        .find('.slick-menu-item')
+        .first()
+        .find('span')
+        .contains('Clear all Filters')
+        .click();
 
-  it('should clear search string and expect default list', () => {
-    cy.get('[data-test=clear-search-string]')
-      .click({ force: true });
+      cy.get('.search-filter.filter-file')
+        .type('music');
 
-    cy.wait(10);
+      cy.get('.right-footer .item-count')
+        .contains('1');
 
-    defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => {
-      if (rowIdx < defaultSortDescListWithExtraSongs.length - 1) {
-        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`)
-          .should('contain', defaultSortDescListWithExtraSongs[rowIdx]);
-      }
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'music');
     });
-  });
 
-  it('should be able to add a 3rd new pop song into the Music folder and see it show up in the UI', () => {
-    cy.get('[data-test=add-item-btn]')
-      .contains('Add New Pop Song')
-      .click();
+    it('should use same filter "music" and now expect to see 10 rows (entire music folder content) to show up when "Exclude Children when Filtering Tree" becomes uncheck', () => {
+      cy.get('[data-test="exclude-child-when-filtering"]')
+        .uncheck();
 
-    cy.get('.slick-group-toggle[level=3]')
-      .get('.slick-cell')
-      .contains('pop-127.mp3');
+      cy.get('.right-footer .item-count')
+        .contains('11');
 
-    cy.get('.slick-group-toggle[level=3]')
-      .get('.slick-cell')
-      .contains('pop-127.mp3');
-  });
+      const allMusic = [...popMusicWith3ExtraSongs, 'rock', 'soft.mp3'];
+
+      allMusic.forEach((_colName, rowIdx) => {
+        if (rowIdx < allMusic.length - 3) {
+          cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', allMusic[rowIdx]);
+        }
+      });
+    });
+
+    it('should use same filter "music" and add extra filter of "size >= 50" and expect 1+ songs (>=6 rows) to show up in the grid when "Exclude Children when Filtering Tree" is unchecked and "Skip Other Criteria..." is checked', () => {
+      cy.get('.search-filter.filter-size')
+        .find('input')
+        .type('50');
 
-  it('should return 8 rows when filtering the word "pop" music without excluding children', () => {
-    cy.get('.search-filter.filter-file')
-      .type('pop');
+      cy.get('.search-filter.filter-size')
+        .find('.input-group-addon.operator select')
+        .select('>=');
 
-    cy.get('.right-footer .item-count')
-      .contains('8');
+      cy.wait(50)
+        .get('.right-footer .item-count')
+        .then($row => {
+          expect(+$row.text()).to.be.at.least(6);
+        });
 
-    popMusicWith3ExtraSongs.forEach((_colName, rowIdx) => {
-      if (rowIdx < popMusicWith3ExtraSongs.length - 1) {
-        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongs[rowIdx]);
-      }
+      const expectedFiles = ['music', 'mp3', 'pop', 'pop-79.mp3', 'rock', 'soft.mp3'];
+
+      expectedFiles.forEach((_colName, rowIdx) => {
+        if (rowIdx < expectedFiles.length - 3) {
+          cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', expectedFiles[rowIdx]);
+        }
+      });
     });
-  });
 
-  it('should return 6 rows when using same filter "pop" music AND selecting checkbox to "Exclude Children when Filtering Tree"', () => {
-    cy.get('[data-test="exclude-child-when-filtering"]')
-      .check();
+    it('should use same filter "music" and "size > 70" then unchecked "Skip Other Criteria..." and now expect 0 rows in the grid because there 0 rows having these 2 filters criteria', () => {
+      cy.get('[data-test="auto-approve-parent-item"]')
+        .uncheck();
 
-    cy.get('.right-footer .item-count')
-      .contains('6');
+      cy.get('.right-footer .item-count')
+        .contains('0');
+    });
 
-    popMusicWith3ExtraSongs.forEach((_colName, rowIdx) => {
-      if (rowIdx < popMusicWith3ExtraSongs.length - 3) {
-        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', popMusicWith3ExtraSongs[rowIdx]);
-      }
+    it('should clear all filters', () => {
+      cy.get('[data-test="clear-filters-btn"]')
+        .click();
+    });
+
+    it('should have pop songs folder with updated aggregations including 4 pop songs of Sum(400.3MB) / Avg(66.72MB)', () => {
+      cy.get('.slick-viewport-top.slick-viewport-left')
+        .scrollTo('center', { force: true } as any);
+
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 400.3 MB / avg: 66.72 MB');
+      // next folder is "other" and is empty without aggregations
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 302.3 MB / avg: 60.46 MB');
+    });
+
+    it('should remove last inserted pop song 81 and expect aggregations to be updated with Sum(316.3MB) / Avg(63.26MB)', () => {
+      cy.get('[data-test="remove-item-btn"]')
+        .click();
+
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB');
+      // next folder is "other" and is empty without aggregations
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB');
     });
   });
 
-  it('should change filter to the word "music" and expect only 1 row (the music folder) to show up when still Excluding Children from the Tree', () => {
-    cy.get('#slickGridContainer-grid28')
-      .find('button.slick-grid-menu-button')
-      .click();
+  describe('Auto-Recalc Tree Totals feature enabled', () => {
+    it('should enable auto-recalc Tree Totals', () => {
+      cy.get('[data-test="auto-recalc-totals"]')
+        .check();
+    });
 
-    cy.get('.slick-grid-menu:visible')
-      .find('.slick-menu-item')
-      .first()
-      .find('span')
-      .contains('Clear all Filters')
-      .click();
+    it('should have pop songs folder with aggregation reflecting what is displayed, Sum(316.3MB) / Avg(63.26MB)', () => {
+      cy.get('.slick-viewport-top.slick-viewport-left')
+        .scrollTo('center', { force: true } as any);
 
-    cy.get('.search-filter.filter-file')
-      .type('music');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(0)`).should('contain', 'music');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 16}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 17}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 316.3 MB / avg: 63.26 MB');
+      // next folder is "other" and is empty without aggregations
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(0)`).should('contain', 'pop');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 19}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 218.3 MB / avg: 54.58 MB');
+    });
 
-    cy.get('.right-footer .item-count')
-      .contains('1');
+    it('should have documents with same Sum as the beginning since auto-recalc is disabled, aggregation should be Sum(14.46MB) / Avg(1.45MB)', () => {
+      cy.get('.slick-viewport-top.slick-viewport-left')
+        .scrollTo('top', { force: true } as any);
 
-    cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'music');
-  });
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'documents');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 14.46 MB / avg: 1.45 MB (total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'misc');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.4 MB / avg: 0.4 MB (sub-total)');
+    });
 
-  it('should use same filter "music" and now expect to see 10 rows (entire music folder content) to show up when "Exclude Children when Filtering Tree" becomes uncheck', () => {
-    cy.get('[data-test="exclude-child-when-filtering"]')
-      .uncheck();
+    it('should retype filter "map" and expect totals to be updated with a lower Sum(6MB) / Avg(3MB) of only what is displayed', () => {
+      cy.get('.search-filter.filter-file')
+        .type('map');
 
-    cy.get('.right-footer .item-count')
-      .contains('10');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'documents');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 6 MB / avg: 3 MB (total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'pdf');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 6 MB / avg: 3 MB (sub-total)');
 
-    const allMusic = [...popMusicWith3ExtraSongs, 'rock', 'soft.mp3'];
 
-    allMusic.forEach((_colName, rowIdx) => {
-      if (rowIdx < allMusic.length - 3) {
-        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', allMusic[rowIdx]);
-      }
+      cy.get('.right-footer .item-count').contains('4');
+      cy.get('.right-footer .total-count').contains('31');
+    });
+
+    it('should enable auto-recalc Tree Totals', () => {
+      cy.get('[data-test="clear-filters-btn"]')
+        .click();
+    });
+
+    it('should type filter "b" and expect totals to be updated with a lower Sum(6MB) / Avg(3MB) of only what is displayed', () => {
+      cy.get('.search-filter.filter-file')
+        .type('b');
+
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'bucket-list.txt');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'documents');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 4.02 MB / avg: 1.34 MB (total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'pdf');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'internet-bill.pdf');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).should('contain', '1.3 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'phone-bill.pdf');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(3)`).should('contain', '1.5 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(0)`).should('contain', 'zebra.dll');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(3)`).should('contain', '1.22 MB');
+
+      cy.get('.right-footer .item-count').contains('6');
+      cy.get('.right-footer .total-count').contains('31');
     });
-  });
 
-  it('should use same filter "music" and add extra filter of "size >= 50" and expect 1+ songs (>=6 rows) to show up in the grid when "Exclude Children when Filtering Tree" is unchecked and "Skip Other Criteria..." is checked', () => {
-    cy.get('.search-filter.filter-size')
-      .find('input')
-      .type('{backspace}{backspace}50');
+    it('should type filter "b" and expect totals to be updated with a lower Sum(6MB) / Avg(3MB) of only what is displayed', () => {
+      cy.get('.search-filter.filter-file')
+        .type('i'); // will become "bi"
+
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'documents');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'pdf');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'internet-bill.pdf');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '1.3 MB');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'phone-bill.pdf');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).should('contain', '1.5 MB');
+
+      cy.get('.right-footer .item-count').contains('4');
+      cy.get('.right-footer .total-count').contains('31');
+    });
 
-    cy.get('.search-filter.filter-size')
-      .find('.input-group-addon.operator select')
-      .select('>=');
+    it('should clear all filters', () => {
+      cy.get('[data-test="clear-filters-btn"]')
+        .click();
+    });
 
-    cy.wait(50)
-      .get('.right-footer .item-count')
-      .then($row => {
-        expect(+$row.text()).to.be.at.least(6);
-      });
+    it('should collapse "pdf" folder and filter with "b" again and expect same updated tree totals as earlier collapsed or expanded should still be Sum(2.8MB) / Avg(1.4MB)', () => {
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`)
+        .click();
 
-    const expectedFiles = ['music', 'mp3', 'pop', 'pop-125.mp3', 'rock', 'soft.mp3'];
+      cy.get('.search-filter.filter-file')
+        .type('b');
 
-    expectedFiles.forEach((_colName, rowIdx) => {
-      if (rowIdx < expectedFiles.length - 3) {
-        cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', expectedFiles[rowIdx]);
-      }
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'bucket-list.txt');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'documents');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 4.02 MB / avg: 1.34 MB (total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'pdf');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 2.8 MB / avg: 1.4 MB (sub-total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'zebra.dll');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).should('contain', '1.22 MB');
+
+      cy.get('.right-footer .item-count').contains('4');
+      cy.get('.right-footer .total-count').contains('31');
     });
-  });
 
-  it('should use same filter "music" and "size > 70" then uncked "Skip Other Criteria..." and now expect 0 rows in the grid because there 0 rows having these 2 filters criteria', () => {
-    cy.get('[data-test="auto-approve-parent-item"]')
-      .uncheck();
+    it('should clear all filters and collapse all Tree groups (folders) then type "so" and expect updated "music" totals Sum(104.3MB) / Avg(52.15MB)', () => {
+      cy.get('[data-test="clear-filters-btn"]').click();
+      cy.get('[data-test="collapse-all-btn"]').click();
+
+      cy.get('.search-filter.filter-file').type('so');
 
-    cy.get('.right-footer .item-count')
-      .contains('0');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'documents');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 0.79 MB / avg: 0.79 MB (total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'music');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', 'sum: 104.3 MB / avg: 52.15 MB (total)');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'something.txt');
+      cy.get(`#slickGridContainer-grid28 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '90 MB');
+
+      cy.get('.right-footer .item-count').contains('3');
+      cy.get('.right-footer .total-count').contains('31');
+    });
   });
 });
diff --git a/yarn.lock b/yarn.lock
index ce440b1b..57bf5e7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1058,14 +1058,14 @@
   resolved "https://registry.yarnpkg.com/@slickgrid-universal/binding/-/binding-3.1.0.tgz#4c741a5dca3a0ab4a35f7f97afdfeb94ab95cfe3"
   integrity sha512-8nFG2fccIbxv2gTKnehlXNoybyokMoXejsXalHTaniAGL9HlRm5G4UXd72mzAvvWuJ1k9ytC91ce/+N4hgSyoQ==
 
-"@slickgrid-universal/common@3.1.0", "@slickgrid-universal/common@~3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-3.1.0.tgz#472f93d25888747db53b8e4e81f9e9a648ba5874"
-  integrity sha512-f91qVBRNTE/yxxe59+JJPJrQiMj8xWDwZTYwxFC5Em1WLD/K82yjmYzlvkAJo8lZoZeY2BFcUqCzYXIqfTNC1w==
+"@slickgrid-universal/common@3.2.0", "@slickgrid-universal/common@~3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-3.2.0.tgz#d7a441a9167f69fd3728dd3aa203c1b8b06bfc2a"
+  integrity sha512-bvqjJodIkjQupwzpfx4CiJryBLfAGHbXj65VCHrUfRpb7SXiaDP/uKAOFVnYh1zS5tTHqU9GR46oIfraYJjzXQ==
   dependencies:
     "@slickgrid-universal/event-pub-sub" "~3.1.0"
     "@slickgrid-universal/utils" "~3.1.0"
-    autocompleter "^8.0.4"
+    autocompleter "^9.0.1"
     dequal "^2.0.3"
     dompurify "^3.0.5"
     flatpickr "^4.6.13"
@@ -1075,37 +1075,37 @@
     sortablejs "^1.15.0"
     un-flatten-tree "^2.0.12"
 
-"@slickgrid-universal/composite-editor-component@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-3.1.0.tgz#346ae9617b6ebb1f875c834201c47aa01af620cc"
-  integrity sha512-x2kyirklOm0oyaj8bxs6pvgnioWjG7CBG6GHcgS3ThpesYNr6AUxT+X4C+xFMP30T1sMI6JxgqOVn4HXa4o1Hg==
+"@slickgrid-universal/composite-editor-component@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-3.2.0.tgz#202166bc302bab8cb70c0318e8009f15151755b5"
+  integrity sha512-CLjFpfEJ/lx0lRaYVAKWyqc/wzsuzhcySG8L9Varqracu3nK35kPtsOCfbeKJ8oomX+n6XWF2XK3LRzoqjiEGw==
   dependencies:
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
     "@slickgrid-universal/utils" "~3.1.0"
 
-"@slickgrid-universal/custom-footer-component@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-3.1.0.tgz#ab415fcfa3d326e58ce446647b2d51f433c130ed"
-  integrity sha512-r/NYu/0zM/lN7+n1+QK3edATpExttDh1Jr5xR7ZmJfn9R30HVVideXTgxka+P0I9PGS+nx9II/TdPzpreEQSJQ==
+"@slickgrid-universal/custom-footer-component@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-3.2.0.tgz#cf3f4d9373a09a32604a08e6e847f2cceb4f6de1"
+  integrity sha512-e6RV9C2Ce+7fzTLpk6JjDeTdOI3LX+4GxRO7ytenwe74jdUqk2JILqpAkpA7ZR9duebToNup9vCP8M0fuEqDbg==
   dependencies:
     "@slickgrid-universal/binding" "~3.1.0"
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
     moment-mini "^2.29.4"
 
-"@slickgrid-universal/custom-tooltip-plugin@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-3.1.0.tgz#012889f2be3cf7aba04e6a41b3585139b4414401"
-  integrity sha512-zNzELT6mDvm1xXYskbPfbKdZRKE0t9YfaqoyWmO4IWwfCshflpkam00nOAh6krksDuUL+uJjmBMnC2y5fyh6fw==
+"@slickgrid-universal/custom-tooltip-plugin@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-3.2.0.tgz#91ab56156f52a3cb29ac1b756ff56e9eeefebb35"
+  integrity sha512-PbAmq4KA83M+SYmQ/Ki5YmW9x292Fp+sez38wlEk4YGBM3MIaw+jzJAQi+Ph9hWYZQG/y0sDd65r3vOnIcNrrw==
   dependencies:
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
     dompurify "^3.0.5"
 
-"@slickgrid-universal/empty-warning-component@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-3.1.0.tgz#0b79bcf02aeb39accc1fa9690dce686bbf802d19"
-  integrity sha512-pVkjQXqs83rGMCb4GPmVi5wUSg1KPJE4GIcwGh81ZDdlaaNf505SXkvOJ7YPdo24I+t68H3gD7g9XSiXS+fezw==
+"@slickgrid-universal/empty-warning-component@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-3.2.0.tgz#206e7a8530131c8bd8b0c85968fd2d5503de9686"
+  integrity sha512-g+X4h+AcIt0/xir11qo5sfHZ/uFhnStv4Ez2yWDzmkCGVzAzYYm2ucaPorfMLYf7McadHJS7oAaYlNoMEJmVuw==
   dependencies:
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
 
 "@slickgrid-universal/event-pub-sub@3.1.0", "@slickgrid-universal/event-pub-sub@~3.1.0":
   version "3.1.0"
@@ -1114,53 +1114,53 @@
   dependencies:
     "@slickgrid-universal/utils" "~3.1.0"
 
-"@slickgrid-universal/excel-export@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-3.1.0.tgz#4b09fb0b7d7d8f284bb61fe40ae182383fd016d8"
-  integrity sha512-1VyJL9+0uu/iMuwqsJ9DLoT3KNaZx4GblCCNohXv/iNvAmwlR4SiTe6DJfbajpTvdZ6JL6pVoO2h9N4Qy14ExQ==
+"@slickgrid-universal/excel-export@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-3.2.0.tgz#1c072644f4b4d10b3fc18bd4a32aa5a946ccbfe2"
+  integrity sha512-I303kz+pY6Zxtc3WWZjIGilz/hUU39FfG04tkWa//Aws5voSFmWh5mi/MCPujeZi5hlrQ2tQeR81VRR4+c0Ibw==
   dependencies:
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
     "@slickgrid-universal/utils" "~3.1.0"
     excel-builder-webpacker "^2.1.8"
     moment-mini "^2.29.4"
 
-"@slickgrid-universal/graphql@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-3.1.0.tgz#aaafe631871e5a46fbf9c6b2be66361b418b8835"
-  integrity sha512-UM2yvvxMBneTXJh7cQewXDc7Nf3xHWxIr+cCgUifNVjJE/NiofHJAkdXlc7Qg8BQMyIKzM4pLmtpqplbTwxKXw==
+"@slickgrid-universal/graphql@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-3.2.0.tgz#1f56b913f217b07e69c61da11aa83058362730ed"
+  integrity sha512-qoMDlTuwajcqye3baocXXEdna7ktpFkJ1t+07ak3oEcemkzUUlgGgFUCVNwiO4cE7H8ajuoIKWUWJXgaF90smA==
   dependencies:
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
 
-"@slickgrid-universal/odata@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-3.1.0.tgz#4cc5d3228c7621a78d1fafc48ebd19fe9f01b808"
-  integrity sha512-HkX8yKdTXY1TccixkOs5ZNwvnlaebYQ2tw0zXsmcdhOylAQgxsg0HSgvFzg6EpyxXPL9+dmG/mGoIDXJU4WyLg==
+"@slickgrid-universal/odata@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-3.2.0.tgz#2c562c7950b83d6f956efe50eea8ed121f0ec4bc"
+  integrity sha512-yiuwsSLPsjGwI910fOg5is0e8LA0G9RFwXnD3FoHngHX6/y/mf4dCDGvCQQp+Lx09ogAiayxuVy9tXT6/DA+nQ==
   dependencies:
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
     "@slickgrid-universal/utils" "~3.1.0"
 
-"@slickgrid-universal/pagination-component@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-3.1.0.tgz#a4c8c316d29d804678e6b16dce4d7860f2c26eb4"
-  integrity sha512-gALXucKXmzjHs95/HsbA6C8ruguXc0PcXmpPycyy5/VJ0UtQLI0yFOhCsgiiqMuKVyO32iGgDAjeotFLsuR9Ow==
+"@slickgrid-universal/pagination-component@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-3.2.0.tgz#4b71861ac6c5b236e9d5968876fa2b436e394d08"
+  integrity sha512-H93LGpKDqMOetkUkdizgfAn6xYZAgsnb0jGv5B0j8nRuWYhPd02koc669KWah9wjqHNOX9bnv+De5T0HYpFkCQ==
   dependencies:
     "@slickgrid-universal/binding" "~3.1.0"
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
 
-"@slickgrid-universal/rxjs-observable@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-3.1.0.tgz#a45a7864e56bd343be6f423ba1e000d9fd7cb2ff"
-  integrity sha512-vzUzHejKlOBIiw1m/zdS0Eb5q5uYw6e42ZOlSjk3YXyZrXpjYAeCskjD2rtrEjEO2AtZLX7IRVxiDUtOzJUnRg==
+"@slickgrid-universal/rxjs-observable@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-3.2.0.tgz#95bac05abb91c455150fc8bfb353158258885811"
+  integrity sha512-DF18Epb+8WXYBq0h7CsVz6lN8I6UUQ8MLkQjiMaH1F7j1ond2EwH7CorVIE+31ht/qYteapT+EjddHVQB/i0mA==
   dependencies:
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
     rxjs "^7.8.1"
 
-"@slickgrid-universal/text-export@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-3.1.0.tgz#cbaf20568d745d6f113f84947682b8ea9852d01a"
-  integrity sha512-h8znAr3iojqnN8ZgPFFlG9lCZk1VWzIYZoJ7cqV/3W1xJCLun3GJ/XxTocs2yLXSz4lFeedwWBHiKTK536TdBA==
+"@slickgrid-universal/text-export@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-3.2.0.tgz#bba4e3cd540370de6e9224315da10af354eb21e9"
+  integrity sha512-0YyWnVDFH5mBmmva+VnRjNwaFJ1AocznwlChhy/4oMS9p1opyXbGWDLo8z9CA5iOEQ6EjobCzTxtSeOIV3xoEw==
   dependencies:
-    "@slickgrid-universal/common" "~3.1.0"
+    "@slickgrid-universal/common" "~3.2.0"
     "@slickgrid-universal/utils" "~3.1.0"
     text-encoding-utf-8 "^1.0.2"
 
@@ -2265,10 +2265,10 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-autocompleter@^8.0.4:
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/autocompleter/-/autocompleter-8.0.4.tgz#1c4440397fbe9816ab443ebaa09f38e6d7bed89e"
-  integrity sha512-q334YswwucSBphN5djVkEt3beVhHotrCtPGNIXmyilw9UnXV9Cb+gNAZ2yhZSfiBSzP6rxHLLT2gpr57xgbcwQ==
+autocompleter@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/autocompleter/-/autocompleter-9.0.1.tgz#cc26dcd6f41085623064144227d6582d516f2b59"
+  integrity sha512-k2NzyUdyI11q7ShEz4/Qo+lh5DocL8dOZr/wKhg5XamdBmQU2lAtgj8+L9qvHcrwehGIrVIkdLrxnjMnsjYufg==
 
 available-typed-arrays@^1.0.5:
   version "1.0.5"