Merge pull request #26 from netgrif/NAE-1612

machacjozef · web-flow · commit 485e08571342 · 2022-04-08T14:26:03.000+02:00
[NAE-1612] Optimize Tree Case View performance with many children
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -1,6 +1,7 @@
 * [Introduction](/)
 * [Get Started](get_started.md)
 * [Configuration](configuration/configuration.md)
+* [Tree case view](views/tree_case_view.md)
 * Compodoc
   * [Components](https://components.netgrif.com/compodoc/components)
 * Typedoc
diff --git a/docs/views/tree_case_view.md b/docs/views/tree_case_view.md
@@ -0,0 +1,16 @@
+#Tree case view
+
+##Configure case paging
+
+By default, the Tree case view uses a page size of 50 cases when it loads the tree nodes.
+
+If you want to configure this value you can do this by providing the `NAE_TREE_CASE_VIEW_CONFIGURATION` injection token.
+
+If you provide this token directly in the Component that houses the Tree case view, you will configure the page size of this view only. By providing the token higher in the provider tree you will affect all Tree case views in the respective subtree. By providing the token at the application root, all Tree case views in the application will be affected by this configuration.
+
+An example code snippet, for setting the page size to 100, note that other providers may be present in a real application:
+```typescript
+providers: [
+    {provide: NAE_TREE_CASE_VIEW_CONFIGURATION, useValue: {pageSize: 100}}   
+]
+```
diff --git a/projects/nae-example-app/src/app/doc/tree-view-example/tree-view-example.component.ts b/projects/nae-example-app/src/app/doc/tree-view-example/tree-view-example.component.ts
@@ -1,13 +1,29 @@
 import {Component} from '@angular/core';
-import {CaseResourceService, Filter, FilterType,
-    ProcessService, SimpleFilter, TreeCaseViewService, CreateCaseEventOutcome} from '@netgrif/components-core';
+import {
+    CaseResourceService,
+    ChangedFieldsService,
+    CreateCaseEventOutcome,
+    createSortParam,
+    Filter,
+    FilterType,
+    NAE_TREE_CASE_VIEW_CONFIGURATION,
+    PaginationParams,
+    PaginationSort,
+    ProcessService,
+    SimpleFilter,
+    TreeCaseViewService,
+} from '@netgrif/components-core';
 import {HttpParams} from '@angular/common/http';
 
 @Component({
     selector: 'nae-app-tree-view-example',
     templateUrl: './tree-view-example.component.html',
     styleUrls: ['./tree-view-example.component.scss'],
-    providers: [TreeCaseViewService]
+    providers: [
+        ChangedFieldsService,
+        TreeCaseViewService,
+        {provide: NAE_TREE_CASE_VIEW_CONFIGURATION, useValue: {pageSize: 100}}
+    ]
 })
 export class TreeViewExampleComponent {
 
@@ -21,7 +37,7 @@ export class TreeViewExampleComponent {
                 private _processService: ProcessService) {
         this.loading = true;
         let params: HttpParams = new HttpParams();
-        params = params.set('sort', 'creationDateSortable,asc');
+        params = params.set(PaginationParams.PAGE_SORT, createSortParam('creationDateSortable', PaginationSort.ASCENDING));
         this._caseResource.searchCases(
             new SimpleFilter('', FilterType.CASE, {process: {identifier: 'tree_test'}, query: '(title:root)'}), params)
             .subscribe(page => {
diff --git a/projects/netgrif-components-core/src/lib/groups/services/next-group.service.ts b/projects/netgrif-components-core/src/lib/groups/services/next-group.service.ts
@@ -6,6 +6,7 @@ import {HttpParams} from '@angular/common/http';
 import {map, switchMap} from 'rxjs/operators';
 import {Case} from '../../resources/interface/case';
 import {BehaviorSubject, Observable, of, Subscription} from 'rxjs';
+import {PaginationParams} from '../../utility/pagination/pagination-params';
 
 /**
  * This service allows access to information about the groups of the currently logged user.
@@ -37,7 +38,7 @@ export class NextGroupService implements OnDestroy {
                 }
 
                 const params = new HttpParams();
-                params.set('size', `${(user as any).nextGroups.length}`);
+                params.set(PaginationParams.PAGE_SIZE, `${(user as any).nextGroups.length}`);
 
                 return this._caseResourceService.searchCases(SimpleFilter.fromCaseQuery({stringId: (user as any).nextGroups}), params)
                     .pipe(
diff --git a/projects/netgrif-components-core/src/lib/resources/abstract-endpoint/abstract-resource.service.ts b/projects/netgrif-components-core/src/lib/resources/abstract-endpoint/abstract-resource.service.ts
@@ -2,6 +2,7 @@ import {ResourceProvider} from '../resource-provider.service';
 import {ConfigurationService} from '../../configuration/configuration.service';
 import {Page} from '../interface/page';
 import {Pagination} from '../interface/pagination';
+import {PaginationParams} from '../../utility/pagination/pagination-params';
 
 /**
  * The class that contains behavior common to all resource services.
@@ -69,7 +70,7 @@ export abstract class AbstractResourceService {
 
         return {
             content: this.changeType<Array<T>>(r, propertiesParams),
-            pagination: r.hasOwnProperty('page') ? r.page : defaultPage
+            pagination: r.hasOwnProperty(PaginationParams.PAGE_NUMBER) ? r.page : defaultPage
         };
     }
 
diff --git a/projects/netgrif-components-core/src/lib/user/services/user-list.service.ts b/projects/netgrif-components-core/src/lib/user/services/user-list.service.ts
@@ -11,6 +11,7 @@ import {HttpParams} from '@angular/common/http';
 import {MessageResource} from '../../resources/interface/message-resource';
 import {Page} from '../../resources/interface/page';
 import {UserResource} from '../../resources/interface/user-resource';
+import {PaginationParams} from '../../utility/pagination/pagination-params';
 
 export interface UserListItem extends UserResource {
     selected: boolean;
@@ -249,9 +250,9 @@ export class UserListService implements OnDestroy {
      * @param page Page number that is requested. / Next page users list.
      */
     private addPageParams(params: HttpParams, page?: number): HttpParams {
-        params = params.set('size', this._pagination.size + '');
+        params = params.set(PaginationParams.PAGE_SIZE, `${this._pagination.size}`);
         page = page !== null ? page : this._pagination.number;
-        params = params.set('page', page + '');
+        params = params.set(PaginationParams.PAGE_NUMBER, `${page}`);
         return params;
     }
 
diff --git a/projects/netgrif-components-core/src/lib/utility/pagination/load-all-pages.ts b/projects/netgrif-components-core/src/lib/utility/pagination/load-all-pages.ts
@@ -5,6 +5,7 @@ import {Pagination} from '../../resources/interface/pagination';
 import {HttpParams} from '@angular/common/http';
 import {concatMap, map} from 'rxjs/operators';
 import {hasContent} from './page-has-content';
+import {PaginationParams} from './pagination-params';
 
 /**
  * Loads all pages from the given endpoint and returns their content as one array
@@ -43,8 +44,8 @@ export function loadAllPages<T>(source: (filter: any, params: Params) => Observa
 
 function paginationParams(basePagination: Pagination, pageNumber?: number): HttpParams {
     let params = new HttpParams();
-    params = params.set('size', basePagination.size + '');
-    params = params.set('page', (pageNumber !== undefined ? pageNumber : basePagination.number) + '');
+    params = params.set(PaginationParams.PAGE_SIZE, `${basePagination.size}`);
+    params = params.set(PaginationParams.PAGE_NUMBER, (pageNumber !== undefined ? pageNumber : basePagination.number) + '');
     return params;
 }
 
diff --git a/projects/netgrif-components-core/src/lib/utility/pagination/pagination-params.ts b/projects/netgrif-components-core/src/lib/utility/pagination/pagination-params.ts
@@ -0,0 +1,17 @@
+/**
+ * Constants for pagination configuration of HTTP requests.
+ */
+export enum PaginationParams {
+    /**
+     * Size of page - maximal number of elements per page.
+     */
+    PAGE_SIZE = 'size',
+    /**
+     * Requested page index. 0 based.
+     */
+    PAGE_NUMBER = 'page',
+    /**
+     * Sort configuration of the requested page. Use the {@link createSortParam} function to generate the value for this attribute.
+     */
+    PAGE_SORT = 'sort'
+}
diff --git a/projects/netgrif-components-core/src/lib/utility/pagination/pagination-sort.ts b/projects/netgrif-components-core/src/lib/utility/pagination/pagination-sort.ts
@@ -0,0 +1,16 @@
+/**
+ * Constants for use with the
+ */
+export enum PaginationSort {
+    ASCENDING = 'asc',
+    DESCENDING = 'desc'
+}
+
+/**
+ * Creates the configuration string for use with the [PAGE_SORT]{@link PaginationParams#PAGE_SORT} configuration attribute
+ * @param attribute the name of the attribute that should be used for sorting the results
+ * @param direction the sorting direction
+ */
+export function createSortParam(attribute: string, direction: PaginationSort): string {
+    return `${attribute},${direction}`;
+}
diff --git a/projects/netgrif-components-core/src/lib/utility/public-api.ts b/projects/netgrif-components-core/src/lib/utility/public-api.ts
@@ -7,6 +7,8 @@ export * from './call-chain/call-chain.service';
 export * from './call-chain/after-action';
 export * from './pagination/page-has-content';
 export * from './pagination/load-all-pages';
+export * from './pagination/pagination-params';
+export * from './pagination/pagination-sort';
 export * from './service/spinner-overlay.service';
 export * from './service/case-list-font-color.service';
 export * from './incrementing-counter';
diff --git a/projects/netgrif-components-core/src/lib/utility/tests/mocks/mock-endpoint.spec.ts b/projects/netgrif-components-core/src/lib/utility/tests/mocks/mock-endpoint.spec.ts
@@ -1,6 +1,7 @@
 import {MockEndpoint} from './mock-endpoint';
 import {HttpParams} from '@angular/common/http';
 import {hasContent} from '../../pagination/page-has-content';
+import {PaginationParams} from '../../pagination/pagination-params';
 
 describe('MockEndpoint', () => {
 
@@ -69,7 +70,7 @@ describe('MockEndpoint', () => {
 
 function paginationParams(page: number, size: number): HttpParams {
     let params = new HttpParams();
-    params = params.set('size', `${size}`);
-    params = params.set('page', `${page}`);
+    params = params.set(PaginationParams.PAGE_SIZE, `${size}`);
+    params = params.set(PaginationParams.PAGE_NUMBER, `${page}`);
     return params;
 }
diff --git a/projects/netgrif-components-core/src/lib/utility/tests/mocks/mock-endpoint.ts b/projects/netgrif-components-core/src/lib/utility/tests/mocks/mock-endpoint.ts
@@ -1,6 +1,7 @@
 import {HttpParams} from '@angular/common/http';
 import {Observable, of} from 'rxjs';
 import {Page} from '../../../resources/interface/page';
+import {PaginationParams} from '../../pagination/pagination-params';
 
 interface RequestedPagination {
     pageSize: number;
@@ -46,8 +47,8 @@ export class MockEndpoint {
 
     private getPagination(params: HttpParams): RequestedPagination {
         return {
-            pageSize: parseInt(params.get('size'), 10),
-            pageNumber: parseInt(params.get('page'), 10)
+            pageSize: parseInt(params.get(PaginationParams.PAGE_SIZE), 10),
+            pageNumber: parseInt(params.get(PaginationParams.PAGE_NUMBER), 10)
         };
     }
 }
diff --git a/projects/netgrif-components-core/src/lib/view/abstract/sortable-view.ts b/projects/netgrif-components-core/src/lib/view/abstract/sortable-view.ts
@@ -7,6 +7,7 @@ import {HeaderChangeType} from '../../header/models/user-changes/header-change-t
 import {OnDestroy} from '@angular/core';
 import {SearchIndexResolverService} from '../../search/search-keyword-resolver-service/search-index-resolver.service';
 import {SearchIndex} from '../../search/models/search-index';
+import {PaginationParams} from '../../utility/pagination/pagination-params';
 
 
 export abstract class SortableView implements OnDestroy {
@@ -49,9 +50,9 @@ export abstract class SortableView implements OnDestroy {
 
     protected addSortParams(params: HttpParams): HttpParams {
         if (this._lastHeaderSearchState.sortDirection !== '') {
-            return params.set('sort', `${this.getSortId()},${this._lastHeaderSearchState.sortDirection}`);
+            return params.set(PaginationParams.PAGE_SORT, `${this.getSortId()},${this._lastHeaderSearchState.sortDirection}`);
         } else {
-            return params.set('sort', this.getDefaultSortParam());
+            return params.set(PaginationParams.PAGE_SORT, this.getDefaultSortParam());
         }
     }
 
diff --git a/projects/netgrif-components-core/src/lib/view/case-view/service/case-view-service.ts b/projects/netgrif-components-core/src/lib/view/case-view/service/case-view-service.ts
@@ -32,6 +32,8 @@ import {NewCaseCreationConfigurationData} from '../../../side-menu/content-compo
 import {PermissionService} from '../../../authorization/permission/permission.service';
 import {EventOutcomeMessageResource} from '../../../resources/interface/message-resource';
 import {CreateCaseEventOutcome} from '../../../event/model/event-outcomes/case-outcomes/create-case-event-outcome';
+import {PaginationParams} from '../../../utility/pagination/pagination-params';
+import {createSortParam, PaginationSort} from '../../../utility/pagination/pagination-sort';
 
 @Injectable()
 export class CaseViewService extends SortableView implements OnDestroy {
@@ -252,13 +254,13 @@ export class CaseViewService extends SortableView implements OnDestroy {
     }
 
     protected addPageParams(params: HttpParams, pagination: Pagination): HttpParams {
-        params = params.set('size', pagination.size + '');
-        params = params.set('page', pagination.number + '');
+        params = params.set(PaginationParams.PAGE_SIZE, `${pagination.size}`);
+        params = params.set(PaginationParams.PAGE_NUMBER, `${pagination.number}`);
         return params;
     }
 
     protected getDefaultSortParam(): string {
-        return 'stringId,desc';
+        return createSortParam('stringId', PaginationSort.DESCENDING);
     }
 
     protected getMetaFieldSortId(): string {
diff --git a/projects/netgrif-components-core/src/lib/view/public-api.ts b/projects/netgrif-components-core/src/lib/view/public-api.ts
@@ -9,6 +9,7 @@ export * from './task-view/models/task-view-configuration';
 export * from './tree-case-view/tree-component/model/case-tree-node';
 export * from './tree-case-view/tree-component/model/case-tree-path';
 export * from './tree-case-view/tree-component/model/expansion-tree';
+export * from './tree-case-view/tree-component/model/tree-case-view-configuration';
 
 /* ENUMS */
 export * from './tree-case-view/model/tree-petriflow-identifiers';
@@ -30,6 +31,7 @@ export * from './case-view/models/new-case-configuration-injection-token';
 export * from './task-view/models/injection-token-task-endpoint';
 export * from './task-view/models/task-view-configuration-injection-token';
 export * from './workflow-view/models/injection-token-workflow-service';
+export * from './tree-case-view/tree-component/model/tree-configuration-injection-token';
 
 /* SERVICES */
 export * from './case-view/service/case-view-service';
diff --git a/projects/netgrif-components-core/src/lib/view/task-view/service/task-view.service.ts b/projects/netgrif-components-core/src/lib/view/task-view/service/task-view.service.ts
@@ -26,6 +26,8 @@ import {SortableView} from '../../abstract/sortable-view';
 import {NAE_TASK_VIEW_CONFIGURATION} from '../models/task-view-configuration-injection-token';
 import {TaskViewConfiguration} from '../models/task-view-configuration';
 import {ChangedFieldsMap} from '../../../event/services/interfaces/changed-fields-map';
+import {PaginationParams} from '../../../utility/pagination/pagination-params';
+import {createSortParam, PaginationSort} from '../../../utility/pagination/pagination-sort';
 
 
 @Injectable()
@@ -336,12 +338,12 @@ export class TaskViewService extends SortableView implements OnDestroy {
     }
 
     protected getDefaultSortParam(): string {
-        return 'priority,desc';
+        return createSortParam('priority', PaginationSort.DESCENDING);
     }
 
     protected addPageParams(params: HttpParams, pagination: Pagination): HttpParams {
-        params = params.set('size', pagination.size + '');
-        params = params.set('page', pagination.number + '');
+        params = params.set(PaginationParams.PAGE_SIZE, `${pagination.size}`);
+        params = params.set(PaginationParams.PAGE_NUMBER, `${pagination.number}`);
         return params;
     }
 }
diff --git a/projects/netgrif-components-core/src/lib/view/tree-case-view/tree-component/case-tree.service.ts b/projects/netgrif-components-core/src/lib/view/tree-case-view/tree-component/case-tree.service.ts
@@ -31,6 +31,10 @@ import {EventOutcomeMessageResource} from '../../../resources/interface/message-
 import {SetDataEventOutcome} from '../../../event/model/event-outcomes/data-outcomes/set-data-event-outcome';
 import {CreateCaseEventOutcome} from '../../../event/model/event-outcomes/case-outcomes/create-case-event-outcome';
 import {refreshTree} from '../../../utility/refresh-tree';
+import {NAE_TREE_CASE_VIEW_CONFIGURATION} from './model/tree-configuration-injection-token';
+import {TreeCaseViewConfiguration} from './model/tree-case-view-configuration';
+import {PaginationParams} from '../../../utility/pagination/pagination-params';
+import {createSortParam, PaginationSort} from '../../../utility/pagination/pagination-sort';
 
 /**
  * An internal helper object, that is used to return two values from a function.
@@ -49,6 +53,8 @@ interface CaseUpdateResult {
 @Injectable()
 export class CaseTreeService implements OnDestroy {
 
+    public static readonly DEFAULT_PAGE_SIZE = 50;
+
     protected _currentNode: CaseTreeNode;
     private _rootNodesFilter: Filter;
     private readonly _treeDataSource: MatTreeNestedDataSource<CaseTreeNode>;
@@ -76,7 +82,14 @@ export class CaseTreeService implements OnDestroy {
                 protected _processService: ProcessService,
                 protected _sideMenuService: SideMenuService,
                 protected _translateService: TranslateService,
-                @Optional() @Inject(NAE_OPTION_SELECTOR_COMPONENT) protected _optionSelectorComponent: any) {
+                @Optional() @Inject(NAE_OPTION_SELECTOR_COMPONENT) protected _optionSelectorComponent: any,
+                @Optional() @Inject(NAE_TREE_CASE_VIEW_CONFIGURATION) protected _treeConfiguration: TreeCaseViewConfiguration) {
+        if (!this._treeConfiguration) {
+            this._treeConfiguration = {
+                pageSize: CaseTreeService.DEFAULT_PAGE_SIZE
+            };
+        }
+
         this._treeDataSource = new MatTreeNestedDataSource<CaseTreeNode>();
         this._treeControl = new NestedTreeControl<CaseTreeNode>(node => node.children);
         _treeCaseViewService.reloadCase$.asObservable().subscribe(() => {
@@ -360,7 +373,9 @@ export class CaseTreeService implements OnDestroy {
         const done = new ReplaySubject<void>(1);
 
         let params: HttpParams = new HttpParams();
-        params = params.set('page', `${pageNumber}`).set('sort', 'creationDate,asc');
+        params = params.set(PaginationParams.PAGE_SIZE, `${this._treeConfiguration.pageSize}`)
+                       .set(PaginationParams.PAGE_NUMBER, `${pageNumber}`)
+                       .set(PaginationParams.PAGE_SORT, createSortParam('creationDate', PaginationSort.ASCENDING));
         this._caseResourceService.getCases(requestBody, params).subscribe(page => {
             if (!hasContent(page)) {
                 this._logger.error('Child cases invalid page content', page);
diff --git a/projects/netgrif-components-core/src/lib/view/tree-case-view/tree-component/model/tree-case-view-configuration.ts b/projects/netgrif-components-core/src/lib/view/tree-case-view/tree-component/model/tree-case-view-configuration.ts
@@ -0,0 +1,9 @@
+/**
+ * Contains configuration of the tree case view service
+ */
+export interface TreeCaseViewConfiguration {
+    /**
+     * The page size of requests for loading node children
+     */
+    pageSize: number;
+}
diff --git a/projects/netgrif-components-core/src/lib/view/tree-case-view/tree-component/model/tree-configuration-injection-token.ts b/projects/netgrif-components-core/src/lib/view/tree-case-view/tree-component/model/tree-configuration-injection-token.ts
@@ -0,0 +1,5 @@
+import {InjectionToken} from '@angular/core';
+import {TreeCaseViewConfiguration} from './tree-case-view-configuration';
+
+
+export const NAE_TREE_CASE_VIEW_CONFIGURATION = new InjectionToken<TreeCaseViewConfiguration>('NaeTreeCaseViewConfiguration');
diff --git a/projects/netgrif-components-core/src/lib/view/workflow-view/workflow-view.service.ts b/projects/netgrif-components-core/src/lib/view/workflow-view/workflow-view.service.ts
@@ -19,6 +19,7 @@ import {SnackBarService} from '../../snack-bar/services/snack-bar.service';
 import {TranslateService} from '@ngx-translate/core';
 import {arrayToObservable} from '../../utility/array-to-observable';
 import {SearchIndexResolverService} from '../../search/search-keyword-resolver-service/search-index-resolver.service';
+import {PaginationParams} from '../../utility/pagination/pagination-params';
 
 
 @Injectable()
@@ -229,17 +230,9 @@ export class WorkflowViewService extends SortableView implements OnDestroy {
         return '';
     }
 
-    protected addSortParams(params: HttpParams): HttpParams {
-        if (this._lastHeaderSearchState.sortDirection !== '') {
-            return params.set('sort', `${this.getSortId()},${this._lastHeaderSearchState.sortDirection}`);
-        } else {
-            return params.set('sort', this.getDefaultSortParam());
-        }
-    }
-
     protected addPageParams(params: HttpParams, pagination: Pagination): HttpParams {
-        params = params.set('size', pagination.size + '');
-        params = params.set('page', pagination.number + '');
+        params = params.set(PaginationParams.PAGE_SIZE, `${pagination.size}`);
+        params = params.set(PaginationParams.PAGE_NUMBER, `${pagination.number}`);
         return params;
     }
 
