Implement autoExpandLevel for EntryModel trees

Add support for the autoExpandLevel flag to automatically collapse tree
nodes beyond the specified depth level. When autoExpandLevel is set, nodes
at depths greater than the specified level are automatically collapsed in
the tree view.

Related to eclipse-cdt-cloud/tsp-typescript-client#130

Signed-off-by: Will Yang <[email protected]>

Author: williamsyang-work

packages/base/package.json

@@ -16,7 +16,7 @@
         "src"
     ],
     "dependencies": {
-        "tsp-typescript-client": "^0.6.0"
+        "tsp-typescript-client": "^0.7.0"
     },
     "devDependencies": {
         "@typescript-eslint/eslint-plugin": "^3.4.0",

packages/react-components/package.json

@@ -36,7 +36,7 @@
         "react-virtualized": "^9.21.0",
         "timeline-chart": "^0.4.1",
         "traceviewer-base": "0.8.0",
-        "tsp-typescript-client": "^0.6.0"
+        "tsp-typescript-client": "^0.7.0"
     },
     "devDependencies": {
         "@testing-library/react": "^15.0.6",

packages/react-components/src/components/abstract-xy-output-component.tsx

@@ -24,6 +24,7 @@ import { ChartOptions } from 'chart.js';
 import { Line, Scatter } from 'react-chartjs-2';
 import { debounce } from 'lodash';
 import { isEqual } from 'lodash';
+import { getCollapsedNodesFromAutoExpandLevel, listToTree } from './utils/filter-tree/utils';
 
 export const ZOOM_IN_RATE = 0.8;
 export const ZOOM_OUT_RATE = 1.25;
@@ -303,11 +304,16 @@ export abstract class AbstractXYOutputComponent<
                     columns.push({ title: 'Name', sortable: true });
                 }
                 const checkedSeries = this.getAllCheckedIds(treeResponse.model.entries);
+                const autoCollapsedNodes = getCollapsedNodesFromAutoExpandLevel(
+                    listToTree(treeResponse.model.entries, columns),
+                    treeResponse.model.autoExpandLevel
+                );
                 this.setState(
                     {
                         outputStatus: treeResponse.status,
                         xyTree: treeResponse.model.entries,
                         defaultOrderedIds: treeResponse.model.entries.map(entry => entry.id),
+                        collapsedNodes: autoCollapsedNodes,
                         checkedSeries,
                         columns
                     },

packages/react-components/src/components/datatree-output-component.tsx

@@ -7,7 +7,7 @@ import { Entry } from 'tsp-typescript-client/lib/models/entry';
 import { DataType } from 'tsp-typescript-client/lib/models/data-type';
 import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
 import { EntryTree } from './utils/filter-tree/entry-tree';
-import { getAllExpandedNodeIds } from './utils/filter-tree/utils';
+import { getAllExpandedNodeIds, getCollapsedNodesFromAutoExpandLevel, listToTree } from './utils/filter-tree/utils';
 import { TreeNode } from './utils/filter-tree/tree-node';
 import ColumnHeader from './utils/filter-tree/column-header';
 import debounce from 'lodash.debounce';
@@ -73,10 +73,15 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
                 } else {
                     columns.push({ title: 'Name', sortable: true });
                 }
+                const autoCollapsedNodes = getCollapsedNodesFromAutoExpandLevel(
+                    listToTree(treeResponse.model.entries, columns),
+                    treeResponse.model.autoExpandLevel
+                );
                 this.setState({
                     outputStatus: treeResponse.status,
                     xyTree: treeResponse.model.entries,
                     defaultOrderedIds: treeResponse.model.entries.map(entry => entry.id),
+                    collapsedNodes: autoCollapsedNodes,
                     columns
                 });
             } else {

packages/react-components/src/components/timegraph-output-component.tsx

@@ -23,7 +23,13 @@ import { TspDataProvider } from './data-providers/tsp-data-provider';
 import { ReactTimeGraphContainer } from './utils/timegraph-container-component';
 import { OutputElementStyle } from 'tsp-typescript-client/lib/models/styles';
 import { EntryTree } from './utils/filter-tree/entry-tree';
-import { listToTree, getAllExpandedNodeIds, getIndexOfNode, validateNumArray } from './utils/filter-tree/utils';
+import {
+    listToTree,
+    getAllExpandedNodeIds,
+    getIndexOfNode,
+    validateNumArray,
+    getCollapsedNodesFromAutoExpandLevel
+} from './utils/filter-tree/utils';
 import hash from 'traceviewer-base/lib/utils/value-hash';
 import ColumnHeader from './utils/filter-tree/column-header';
 import { TimeGraphAnnotationComponent } from 'timeline-chart/lib/components/time-graph-annotation';
@@ -316,11 +322,16 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                 } else {
                     columns.push({ title: '', sortable: true, resizable: true });
                 }
+                const autoCollapsedNodes = getCollapsedNodesFromAutoExpandLevel(
+                    listToTree(treeResponse.model.entries, columns),
+                    treeResponse.model.autoExpandLevel
+                );
                 this.setState(
                     {
                         outputStatus: treeResponse.status,
                         timegraphTree: treeResponse.model.entries,
                         defaultOrderedIds: treeResponse.model.entries.map(entry => entry.id),
+                        collapsedNodes: autoCollapsedNodes,
                         columns
                     },
                     this.updateTotalHeight

packages/react-components/src/components/utils/filter-tree/utils.tsx

@@ -47,6 +47,27 @@ export const listToTree = (list: Entry[], headers: ColumnHeader[]): TreeNode[] =
     return rootNodes;
 };
 
+/**
+ * Returns an array of node IDs that should be collapsed based on the auto-expand level.
+ * Nodes at depths greater than or equal to the autoExpandLevel will be collapsed.
+ * If autoExpandLevel is -1, no nodes are collapsed (all remain expanded).
+ */
+export const getCollapsedNodesFromAutoExpandLevel = (nodes: TreeNode[], autoExpandLevel = -1, depth = 0): number[] => {
+    if (autoExpandLevel === -1) {
+        return [];
+    }
+    const collapsedNodes: number[] = [];
+    for (const node of nodes) {
+        if (autoExpandLevel <= depth) {
+            collapsedNodes.push(node.id);
+        }
+        if (node.children && node.children.length > 0) {
+            collapsedNodes.push(...getCollapsedNodesFromAutoExpandLevel(node.children, autoExpandLevel, depth + 1));
+        }
+    }
+    return collapsedNodes;
+};
+
 export const getAllExpandedNodeIds = (nodes: TreeNode[], collapsedNodes: number[], emptyNodes?: number[]): number[] => {
     const visibleIds: number[] = [];
     nodes.forEach((node: TreeNode) => {

yarn.lock

@@ -13921,10 +13921,10 @@ tslib@^2.0.1, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.6
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
-tsp-typescript-client@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tsp-typescript-client/-/tsp-typescript-client-0.6.0.tgz#59d53a76dcb7759f8f16eb9e798320a9a790b7b1"
-  integrity sha512-K6tl773Nq7lo2XAexHBtVDKiFGUlrwFbzKL6aZkf33iHRyAM80xBc0cAoXXTgsSLb3pBodLQRVzw8sBTGWGwOA==
+tsp-typescript-client@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/tsp-typescript-client/-/tsp-typescript-client-0.7.0.tgz#8565cffa802e0a92a83f1f212d94cc125ebc70b1"
+  integrity sha512-TsVv8gPiMBkx4bxowiZIkUirSPb2BmNLmXYKpvCdh/hImG0N1D1gioBo4YP9NN8A15lX9jW5iFl1xUk25YdXjw==
   dependencies:
     json-bigint sidorares/json-bigint#2c0a5f896d7888e68e5f4ae3c7ea5cd42fd54473
     node-fetch "^2.5.0"