Performance improvements (#1166)

#1166 * Update angular libs
document-list: performance improvements
caching ‘heavy’ cell evaluations (i.e. date pipe)
code/test fixes
document-list: performance improvements
Removed ‘AfterViewChecked’ bottleneck as underlying data-table already
does it.
data-table: performance improvements

demo-shell-ng2/app/components/files/files.component.html

@@ -1,5 +1,4 @@
-<div *ngIf="!fileShowed">
+<div class="container">
-    <div class="container">
     <alfresco-upload-drag-area
             [currentFolderPath]="currentPath"
             [versioning] = "versioning"
@@ -102,11 +101,11 @@
             [supportedPageSizes]="[5, 10, 15, 20]">
         </alfresco-pagination>
     </alfresco-upload-drag-area>
-    </div>
+</div>
 
-    <context-menu-holder></context-menu-holder>
+<context-menu-holder></context-menu-holder>
 
-    <div class="p-10">
+<div class="p-10">
     <ul>
         <li>Current path: {{documentList.currentFolderPath}}</li>
         <li>
@@ -122,47 +121,47 @@
             <button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
         </li>
     </ul>
-    </div>
+</div>
 
 
-    <p style="width:250px;margin: 20px;">
+<p style="width:250px;margin: 20px;">
     <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
         <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
         <span class="mdl-switch__label">Multiple File Upload</span>
     </label>
-    </p>
+</p>
 
 
-    <p style="width:250px;margin: 20px;">
+<p style="width:250px;margin: 20px;">
     <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
         <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
         <span class="mdl-switch__label">Folder Upload</span>
     </label>
-    </p>
+</p>
 
-    <p style="width:250px;margin: 20px;">
+<p style="width:250px;margin: 20px;">
     <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
         <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
         <span class="mdl-switch__label">Filter extension</span>
     </label>
-    </p>
+</p>
 
-    <p style="width:250px;margin: 20px;">
+<p style="width:250px;margin: 20px;">
     <label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
         <input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
         <span class="mdl-switch__label">Versioning</span>
     </label>
-    </p>
+</p>
 
-    <h5>Upload</h5>
+<h5>Upload</h5>
-    <br>
+<br>
-    <div *ngIf="acceptedFilesTypeShow">
+<div *ngIf="acceptedFilesTypeShow">
     <label class="mdl-input__label">Extension accepted
         <input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
     </label>
     <br/>
-    </div>
+</div>
-    <div *ngIf="!acceptedFilesTypeShow">
+<div *ngIf="!acceptedFilesTypeShow">
     <alfresco-upload-button data-automation-id="multiple-file-upload"
                             [currentFolderPath]="currentPath"
                             [multipleFiles]="multipleFileUpload"
@@ -171,8 +170,8 @@
                             (onSuccess)="documentList.reload()">
         <div class="mdl-spinner mdl-js-spinner is-active"></div>
     </alfresco-upload-button>
-    </div>
+</div>
-    <div *ngIf="acceptedFilesTypeShow">
+<div *ngIf="acceptedFilesTypeShow">
     <alfresco-upload-button data-automation-id="multiple-file-upload"
                             [currentFolderPath]="currentPath"
                             acceptedFilesType="{{acceptedFilesType}}"
@@ -182,9 +181,8 @@
                             (onSuccess)="documentList.reload()">
         <div class="mdl-spinner mdl-js-spinner is-active"></div>
     </alfresco-upload-button>
-    </div>
-    <file-uploading-dialog #fileDialog></file-uploading-dialog>
 </div>
+<file-uploading-dialog #fileDialog></file-uploading-dialog>
 
 <div *ngIf="fileShowed">
     <alfresco-viewer [(showViewer)]="fileShowed"

demo-shell-ng2/app/main.ts

@@ -16,7 +16,9 @@
  */
 
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+// import { enableProdMode } from '@angular/core';
 import { AppModule } from './app.module';
 
+// enableProdMode();
 const platform = platformBrowserDynamic();
 platform.bootstrapModule(AppModule);

demo-shell-ng2/package.json

@@ -53,23 +53,21 @@
     "alfresco"
   ],
   "dependencies": {
-    "@angular/common": "2.0.0",
+    "@angular/common": "~2.2.0",
-    "@angular/compiler": "2.0.0",
+    "@angular/compiler": "~2.2.0",
-    "@angular/core": "2.0.0",
+    "@angular/core": "~2.2.0",
-    "@angular/forms": "2.0.0",
+    "@angular/forms": "~2.2.0",
-    "@angular/http": "2.0.0",
+    "@angular/http": "~2.2.0",
-    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser": "~2.2.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
-    "@angular/router": "3.0.0",
+    "@angular/router": "~3.2.0",
-    "@angular/upgrade": "2.0.0",
+
-    "@types/node": "^6.0.42",
+    "systemjs": "0.19.40",
-    "core-js": "^2.4.1",
+    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
+    "reflect-metadata": "^0.1.8",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
+    "zone.js": "^0.6.26",
-    "zone.js": "^0.6.23",
 
-    "rimraf": "2.5.2",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
     "ng2-translate": "2.5.0",
@@ -100,9 +98,11 @@
     "element.scrollintoviewifneeded-polyfill": "^1.0.1"
   },
   "devDependencies": {
+    "@types/node": "^6.0.42",
     "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
+    "rimraf": "2.5.2",
     "license-check": "1.1.5",
     "mime": "^1.3.4",
     "tslint": "3.15.1",

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -172,13 +172,13 @@ describe('DataTable', () => {
         let handler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered']);
         window['componentHandler'] = handler;
 
-        dataTable.ngAfterViewChecked();
+        dataTable.ngOnInit();
         expect(handler.upgradeAllRegistered).toHaveBeenCalled();
     });
 
     it('should upgrade MDL components only when component handler present', () => {
         expect(window['componentHandler']).toBeNull();
-        dataTable.ngAfterViewChecked();
+        dataTable.ngOnInit();
     });
 
     it('should invert "select all" status', () => {

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -15,16 +15,7 @@
  * limitations under the License.
  */
 
-import {
+import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
-    Component,
-    OnInit,
-    Input,
-    Output,
-    EventEmitter,
-    AfterViewChecked,
-    TemplateRef
-} from '@angular/core';
-
 import {
     DataTableAdapter,
     DataRow,
@@ -42,7 +33,7 @@ declare var componentHandler;
     styleUrls: ['./datatable.component.css'],
     templateUrl: './datatable.component.html'
 })
-export class DataTableComponent implements OnInit, AfterViewChecked {
+export class DataTableComponent implements OnInit {
 
     @Input()
     data: DataTableAdapter;
@@ -79,9 +70,7 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
         if (!this.data) {
             this.data = new ObjectDataTableAdapter([], []);
         }
-    }
 
-    ngAfterViewChecked() {
         // workaround for MDL issues with dynamic components
         if (componentHandler) {
             componentHandler.upgradeAllRegistered();

ng2-components/ng2-alfresco-documentlist/src/components/document-list.spec.ts

@@ -272,11 +272,6 @@ describe('DocumentList', () => {
         expect(documentList.executeContentAction).not.toHaveBeenCalled();
     });
 
-    it('should upgrade material design components', () => {
-        documentList.ngAfterViewChecked();
-        expect(componentHandler.upgradeAllRegistered).toHaveBeenCalled();
-    });
-
     it('should subscribe to context action handler', () => {
         spyOn(documentList, 'displayFolderContent').and.stub();
         spyOn(documentList, 'contextActionCallback').and.stub();

ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts

@@ -22,7 +22,6 @@ import {
     Output,
     EventEmitter,
     AfterContentInit,
-    AfterViewChecked,
     TemplateRef,
     NgZone,
     ViewChild,
@@ -41,15 +40,13 @@ import {
     ImageResolver
 } from './../data/share-datatable-adapter';
 
-declare var componentHandler;
-
 @Component({
     moduleId: module.id,
     selector: 'alfresco-document-list',
     styleUrls: ['./document-list.css'],
     templateUrl: './document-list.html'
 })
-export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit {
+export class DocumentList implements OnInit, AfterContentInit {
 
     static SINGLE_CLICK_NAVIGATION: string = 'click';
     static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
@@ -196,16 +193,8 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
         return false;
     }
 
-    ngAfterViewChecked() {
-        // workaround for MDL issues with dynamic components
-        if (componentHandler) {
-            componentHandler.upgradeAllRegistered();
-        }
-    }
-
     isMobile(): boolean {
         return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-
     }
 
     getNodeActions(node: MinimalNodeEntity): ContentActionModel[] {

ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts

@@ -203,8 +203,8 @@ describe('ShareDataTableAdapter', () => {
         spyOn(console, 'error').and.stub();
 
         let value = adapter.getValue(row, col);
-        expect(value).toBe(dateValue);
+        expect(value).toBe('Error');
-        expect(console.error).toHaveBeenCalledWith(`Error parsing date ${value} to format ${col.format}`);
+        expect(console.error).toHaveBeenCalled();
     });
 
     it('should generate fallback icon for a file thumbnail with unknown mime type', () => {

ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts

@@ -121,15 +121,21 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
         if (!col) {
             throw new Error(this.ERR_COL_NOT_FOUND);
         }
-        let value = row.getValue(col.key);
+        let dataRow: ShareDataRow = <ShareDataRow> row;
+        let value: any = row.getValue(col.key);
+        if (dataRow.cache[col.key] !== undefined) {
+            return dataRow.cache[col.key];
+        }
 
         if (col.type === 'date') {
             let datePipe = new DatePipe('en-US');
             let format = col.format || this.DEFAULT_DATE_FORMAT;
             try {
-                return datePipe.transform(value, format);
+                let result = datePipe.transform(value, format);
+                return dataRow.cacheValue(col.key, result);
             } catch (err) {
                 console.error(`Error parsing date ${value} to format ${format}`);
+                return 'Error';
             }
         }
 
@@ -174,7 +180,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
 
         }
 
-        return value;
+        return dataRow.cacheValue(col.key, value);
     }
 
     getSorting(): DataSorting {
@@ -308,6 +314,7 @@ export class ShareDataRow implements DataRow {
 
     static ERR_OBJECT_NOT_FOUND: string = 'Object source not found';
 
+    cache: { [key: string]: any } = {};
     isSelected: boolean = false;
 
     get node(): NodeMinimalEntry {
@@ -320,7 +327,15 @@ export class ShareDataRow implements DataRow {
         }
     }
 
+    cacheValue(key: string, value: any): any {
+        this.cache[key] = value;
+        return value;
+    }
+
     getValue(key: string): any {
+        if (this.cache[key] !== undefined) {
+            return this.cache[key];
+        }
         return ObjectUtils.getValue(this.obj.entry, key);
     }