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 <william.yang@ericsson.com>

Author: williamsyang-work

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",

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
                     },

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 {

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

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) => {