[#noissue] Enhance calltree search user-experience

web/src/main/angular/src/app/core/components/call-tree/call-tree-container.component.ts

@@ -15,6 +15,7 @@ import { IGridData } from './call-tree.component';
 import { CallTreeComponent } from './call-tree.component';
 import { MessagePopupContainerComponent } from 'app/core/components/message-popup/message-popup-container.component';
 import { SyntaxHighlightPopupContainerComponent } from 'app/core/components/syntax-highlight-popup/syntax-highlight-popup-container.component';
+import { isEmpty } from 'app/core/utils/util';
 
 @Component({
     selector: 'pp-call-tree-container',
@@ -52,8 +53,16 @@ export class CallTreeContainerComponent implements OnInit, OnDestroy {
             withLatestFrom(this.storeHelperService.getTransactionViewType(this.unsubscribe)),
             filter(([_, viewType]: [ISearchParam, string]) => viewType === 'callTree'),
             map(([params]) => params)
-        ).subscribe((params: ISearchParam) => {
-            this.transactionSearchInteractionService.setSearchResultCount(this.callTreeComponent.getQueryedRowCount(params));
+        ).subscribe(({type, query, resultIndex}: ISearchParam) => {
+            const resultRowList = this.callTreeComponent.getQueryedRowList({type, query});
+            const resultCount = resultRowList.length;
+
+            if (!isEmpty(resultRowList)) {
+                const targetRow = resultRowList[resultIndex];
+
+                this.callTreeComponent.moveRow(targetRow);
+            }
+            this.transactionSearchInteractionService.setSearchResultCount(resultCount);
         });
 
         this.selectedRowId$ = this.messageQueueService.receiveMessage(this.unsubscribe, MESSAGE_TO.TRANSACTION_TIMELINE_SELECT_TRANSACTION);

web/src/main/angular/src/app/core/components/call-tree/call-tree.component.css

@@ -18,6 +18,16 @@
     margin-right: 3px;
 }
 
+::ng-deep #call-tree-table .ag-body {
+    background-color: var(--background-default);
+}
+
+::ng-deep #call-tree-table .ag-header-cell {
+    color: var(--text-primary) !important;
+    background-color: var(--background-default);
+    font-weight: bold;
+}
+
 ::ng-deep #call-tree-table .ag-row {
     color: var(--text-primary-lighter);
     background-color: var(--background-primary);
@@ -32,14 +42,21 @@
     background-color: var(--background-row-danger);
 }
 
-::ng-deep #call-tree-table .ag-body {
-    background-color: var(--background-default);
+::ng-deep #call-tree-table .ag-row-focused {
+    background-color: var(--background-hover-secondary);
 }
 
-::ng-deep #call-tree-table .ag-header-cell {
-    color: var(--text-primary) !important;
-    background-color: var(--background-default);
-    font-weight: bold;
+::ng-deep #call-tree-table .ag-row-exception.ag-row-focused {
+    background-color: var(--background-row-danger-secondary);
+}
+
+::ng-deep #call-tree-table .ag-row-search-target {
+    background-color: var(--background-row-search-target) !important;
+    color: var(--text-highlight) !important;
+}
+
+::ng-deep #call-tree-table .ag-row-search-target.ag-row-focused {
+    background-color: var(--background-row-search-target-current) !important;
 }
 
 ::ng-deep .ag-cell-wrapper.ag-row-group[class*="ag-row-group-indent"],

web/src/main/angular/src/app/core/components/call-tree/call-tree.component.ts

@@ -25,6 +25,7 @@ export interface IGridData {
     hasException: boolean;
     isAuthorized: boolean;
     isFocused: boolean;
+    isSearchTarget: boolean;
     folder?: boolean;
     open?: boolean;
     children?: any[];
@@ -45,6 +46,10 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
         this.originalData = callTreeData;
         this.ratio = this.calcTimeRatio(callTreeData.callStack[0][callTreeData.callStackIndex.begin], callTreeData.callStack[0][callTreeData.callStackIndex.end]);
         this.rowData = this.makeGridData(callTreeData.callStack, callTreeData.callStackIndex);
+        if (this.gridOptions) {
+            this.gridOptions.context.focusIndex = null;
+            this.gridOptions.context.searchTargetIndexList = [];
+        }
     }
 
     @Input() timezone: string;
@@ -55,6 +60,7 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
 
     private originalData: ITransactionDetailData;
     private ratio: number;
+    private isRendered = false;
 
     gridOptions: GridOptions;
     rowData: IGridData[];
@@ -65,9 +71,7 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
     ) {}
 
     ngAfterViewInit() {
-        const rowIndex = this.originalData.callStack.find((cs: any[]) => cs[4] === this.originalData.applicationId)[6];
-
-        this.moveRow(rowIndex);
+        this.moveRow(this.getInitialRowId());
     }
 
     ngOnInit() {
@@ -89,7 +93,10 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
                         });
                         break;
                     case 'selectedRowId':
-                        this.moveRow(changes[propName].currentValue);
+                        const rowId = changes[propName].currentValue;
+                        const row = this.gridOptions.api.getRowNode(rowId);
+
+                        this.moveRow(row);
                         break;
                 }
             });
@@ -106,15 +113,20 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
             animateRows: true,
             enableCellTextSelection: true,
             rowHeight: 30,
-            getRowClass: (params: any) => {
-                if ( params.data.isFocused ) {
-                    return 'ag-row-focused';
-                } else if ( params.data.hasException ) {
-                    return 'ag-row-exception';
-                } else {
-                    return '';
-                }
+            context: {
+                focusIndex: null,
+                searchTargetIndexList: [],
+            },
+            rowClassRules: {
+                'ag-row-search-target': ({context, rowIndex}: any) => {
+                    return context.searchTargetIndexList.includes(rowIndex);
+                },
+                'ag-row-focused': ({context, rowIndex}: any) => {
+                    return rowIndex === context.focusIndex;
+                },
+                'ag-row-exception': ({data}: any) => data.hasException,
             },
+            getRowNodeId: (data) => data.id,
             getNodeChildDetails: (file) => {
                 if (file.folder) {
                     return {
@@ -133,7 +145,7 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
                 }
             },
             suppressRowClickSelection: !this.canSelectRow,
-            rowSelection: this.rowSelection
+            rowSelection: this.rowSelection,
         };
     }
 
@@ -152,6 +164,16 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
         return color;
     }
 
+    private getInitialRowId(): RowNode {
+        const {callStack, callStackIndex, applicationId} = this.originalData;
+        const exceptionRow = callStack.find((call: any[]) => call[callStackIndex.hasException]);
+        const rowId = exceptionRow ? exceptionRow[callStackIndex.id]
+            : callStack.find((cs: any[]) => cs[callStackIndex.applicationName] === applicationId)[callStackIndex.id];
+        const row = this.gridOptions.api.getRowNode(rowId);
+
+        return row;
+    }
+
     private getAgentKey(rowIndex: number): string {
         let agentKey = null;
 
@@ -392,39 +414,28 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
     }
 
     onRendered(): void {
+        this.isRendered = true;
         this.gridOptions.api.sizeColumnsToFit();
     }
 
     onRowDataChanged(): void {
-        if (this.gridOptions) {
-            const rowIndex = this.originalData.callStack.find((cs: any[]) => cs[4] === this.originalData.applicationId)[6];
-
-            this.moveRow(rowIndex);
+        if (this.isRendered) {
+            this.moveRow(this.getInitialRowId());
         }
     }
 
-    getQueryedRowCount({type, query}: {type: string, query: string | number}): number {
-        let resultCount = 0;
-        let targetIndex = -1;
+    getQueryedRowList({type, query}: {type: string, query: string}): RowNode[] {
+        const rowList: RowNode[] = [];
+
+        this.gridOptions.context.searchTargetIndexList = [];
 
         this.gridOptions.api.forEachNode((rowNode: RowNode) => {
             if (this.hasValueOnType(type, rowNode.data, query)) {
-                if (resultCount === 0) {
-                    targetIndex = rowNode.data.index;
-                }
-
-                resultCount++;
-                rowNode.setSelected(true);
-            } else {
-                rowNode.setSelected(false);
+                this.gridOptions.context.searchTargetIndexList.push(rowNode.rowIndex);
+                rowList.push(rowNode);
             }
         });
-
-        if (resultCount > 0) {
-            this.gridOptions.api.ensureIndexVisible(targetIndex, 'top');
-        }
-
-        return resultCount;
+        return rowList;
     }
 
     private calcTimeRatio(begin: number, end: number): number {
@@ -480,46 +491,44 @@ export class CallTreeComponent implements OnInit, OnChanges, AfterViewInit {
         oRow['methodType'] = callTree[oIndex.methodType];
         oRow['hasException'] = callTree[oIndex.hasException];
         oRow['isAuthorized'] = callTree[oIndex.isAuthorized];
-        oRow['isFocused'] = callTree[oIndex.isFocused];
+        // oRow['isFocused'] = callTree[oIndex.isFocused];
         if (callTree[oIndex.hasChild]) {
             oRow['folder'] = true;
             oRow['open'] = true;
             oRow['children'] = [];
         }
     }
 
-    private hasValueOnType(type: string, data: any, value: string | number): boolean {
+    private hasValueOnType(type: string, data: any, query: string): boolean {
+        const value = query.toLowerCase();
+
         switch (type) {
             case 'all':
-                return (data.method && data.method.indexOf(value) !== -1) ||
-                    (data.argument && data.argument.indexOf(value) !== -1) ||
-                    (data.clazz && data.clazz.indexOf(value) !== -1) ||
-                    (data.api && data.api.indexOf(value) !== -1) ||
-                    (data.agent && data.agent.indexOf(value) !== -1) ||
-                    (data.application && data.application.indexOf(value) !== -1);
+                return (data.method && data.method.toLowerCase().includes(value)) ||
+                    (data.argument && data.argument.toLowerCase().includes(value)) ||
+                    (data.clazz && data.clazz.toLowerCase().includes(value)) ||
+                    (data.api && data.api.toLowerCase().includes(value)) ||
+                    (data.agent && data.agent.toLowerCase().includes(value)) ||
+                    (data.application && data.application.toLowerCase().includes(value));
             case 'self':
                 return +data.selp >= +value;
             case 'argument':
-                return data.argument.indexOf(value) !== -1;
+                return data.argument.toLowerCase().includes(value);
             case 'exception':
-                return data.hasException && (
-                    (data.method && data.method.indexOf(value) !== -1) ||
-                    (data.argument && data.argument.indexOf(value) !== -1)
-                )
+                return data.hasException && (value === '' ||
+                    ((data.method && data.method.toLowerCase().includes(value)) ||
+                    (data.argument && data.argument.toLowerCase().includes(value)))
+                );
+                // return data.hasException && (
+                //     (data.method && data.method.indexOf(value) !== -1) ||
+                //     (data.argument && data.argument.indexOf(value) !== -1)
+                // )
         }
     }
 
-    moveRow(id: string): void {
-        let targetIndex = -1;
-        this.gridOptions.api.forEachNode((rowNode: RowNode) => {
-            if (rowNode.data.id === id) {
-                targetIndex = rowNode.data.index;
-                rowNode.setSelected(true);
-            } else {
-                rowNode.setSelected(false);
-            }
-        });
-
-        this.gridOptions.api.ensureIndexVisible(targetIndex, 'top');
+    moveRow(row: RowNode): void {
+        this.gridOptions.context.focusIndex = row.rowIndex;
+        this.gridOptions.api.ensureNodeVisible(row, 'middle');
+        this.gridOptions.api.redrawRows();
     }
 }

web/src/main/angular/src/app/core/components/timeline/timeline.component.css

@@ -46,11 +46,11 @@
     stroke-width: 2;
 }
 .selection-point line {
-    stroke: var(--yellow-default);
+    stroke: var(--yellow-500);
     stroke-width: 1;
 }
 .selection-point circle {
-    fill: var(--yellow-default);
+    fill: var(--yellow-500);
     stroke: var(--border-default);
     stroke-width: 2;
 }

web/src/main/angular/src/app/core/components/transaction-search/transaction-search-container.component.css

@@ -1,3 +1,5 @@
 :host {
     display: flex;
+    flex: 1;
+    margin-left: 25px;
 }

web/src/main/angular/src/app/core/components/transaction-search/transaction-search-container.component.html

@@ -1,6 +1,7 @@
 <pp-transaction-search
     [viewType]="currentViewType"
     [useArgument]="useArgument"
-    [resultMessage]="resultMessage"
+    [resultCount]="resultCount"
+    [emptyMessage]="emptyMessage"
     (outSearch)="onSearch($event)">
 </pp-transaction-search>