New packages org (#2639)

New packages org

lib/insights/diagram/components/activities/diagram-alfresco-publish-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-alfresco-publish-task [data]="data"></diagram-icon-alfresco-publish-task>

lib/insights/diagram/components/activities/diagram-alfresco-publish-task.component.ts

@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'adf-diagram-publish-task, diagram-alfresco-publish-task',
+    templateUrl: './diagram-alfresco-publish-task.component.html'
+})
+export class DiagramAlfrescoPublishTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/activities/diagram-box-publish-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-box-publish-task [data]="data"></diagram-icon-box-publish-task>

lib/insights/diagram/components/activities/diagram-box-publish-task.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-box-publish-task',
+    templateUrl: './diagram-box-publish-task.component.html'
+})
+export class DiagramBoxPublishTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/activities/diagram-business-rule-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-business-rule-task [data]="data"></diagram-icon-business-rule-task>

lib/insights/diagram/components/activities/diagram-business-rule-task.component.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-business-rule-task',
+    templateUrl: './diagram-business-rule-task.component.html'
+})
+export class DiagramBusinessRuleTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+}

lib/insights/diagram/components/activities/diagram-camel-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-camel-task [data]="data"></diagram-icon-camel-task>

lib/insights/diagram/components/activities/diagram-camel-task.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-camel-task',
+    templateUrl: './diagram-camel-task.component.html'
+})
+export class DiagramCamelTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/activities/diagram-container-service-task.component.html

@@ -0,0 +1,26 @@
+<div [ngSwitch]="data.taskType">
+    <div *ngSwitchCase="'mail'">
+        <diagram-send-task [data]="data"></diagram-send-task>
+    </div>
+    <div *ngSwitchCase="'camel'">
+        <diagram-camel-task [data]="data"></diagram-camel-task>
+    </div>
+    <div *ngSwitchCase="'mule'">
+        <diagram-mule-task [data]="data"></diagram-mule-task>
+    </div>
+    <div *ngSwitchCase="'alfresco_publish'">
+        <adf-diagram-publish-task [data]="data"></adf-diagram-publish-task>
+    </div>
+    <div *ngSwitchCase="'rest_call'">
+        <diagram-rest-call-task [data]="data"></diagram-rest-call-task>
+    </div>
+    <div *ngSwitchCase="'google_drive_publish'">
+        <diagram-google-drive-publish-task [data]="data"></diagram-google-drive-publish-task>
+    </div>
+    <div *ngSwitchCase="'box_publish'">
+        <diagram-box-publish-task [data]="data"></diagram-box-publish-task>
+    </div>
+    <div *ngSwitchDefault>
+        <diagram-service-task [data]="data"></diagram-service-task>
+    </div>
+</div>

lib/insights/diagram/components/activities/diagram-container-service-task.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-container-service-task',
+    templateUrl: './diagram-container-service-task.component.html'
+})
+export class DiagramContainerServiceTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/activities/diagram-google-drive-publish-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-google-drive-publish-task [data]="data"></diagram-icon-google-drive-publish-task>

lib/insights/diagram/components/activities/diagram-google-drive-publish-task.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-google-drive-publish-task',
+    templateUrl: './diagram-google-drive-publish-task.component.html'
+})
+export class DiagramGoogleDrivePublishTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/activities/diagram-manual-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-manual-task [data]="data"></diagram-icon-manual-task>

lib/insights/diagram/components/activities/diagram-manual-task.component.ts

@@ -0,0 +1,35 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-manual-task',
+    templateUrl: './diagram-manual-task.component.html'
+})
+export class DiagramManualTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {
+    }
+}

lib/insights/diagram/components/activities/diagram-mule-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-mule-task [data]="data"></diagram-icon-mule-task>

lib/insights/diagram/components/activities/diagram-mule-task.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-mule-task',
+    templateUrl: './diagram-mule-task.component.html'
+})
+export class DiagramMuleTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/activities/diagram-receive-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-receive-task [data]="data"></diagram-icon-receive-task>

lib/insights/diagram/components/activities/diagram-receive-task.component.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-receive-task',
+    templateUrl: './diagram-receive-task.component.html'
+})
+export class DiagramReceiveTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+}

lib/insights/diagram/components/activities/diagram-rest-call-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-rest-call-task [data]="data"></diagram-icon-rest-call-task>

lib/insights/diagram/components/activities/diagram-rest-call-task.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-rest-call-task',
+    templateUrl: './diagram-rest-call-task.component.html'
+})
+export class DiagramRestCallTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/activities/diagram-script-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-script-task [data]="data"></diagram-icon-script-task>

lib/insights/diagram/components/activities/diagram-script-task.component.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-script-task',
+    templateUrl: './diagram-script-task.component.html'
+})
+export class DiagramScriptTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+}

lib/insights/diagram/components/activities/diagram-send-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-send-task [data]="data"></diagram-icon-send-task>

lib/insights/diagram/components/activities/diagram-send-task.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-send-task',
+    templateUrl: './diagram-send-task.component.html'
+})
+export class DiagramSendTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/activities/diagram-service-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-service-task [data]="data"></diagram-icon-service-task>

lib/insights/diagram/components/activities/diagram-service-task.component.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-service-task',
+    templateUrl: './diagram-service-task.component.html'
+})
+export class DiagramServiceTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+}

lib/insights/diagram/components/activities/diagram-task.component.html

@@ -0,0 +1,5 @@
+<raphael-rect [elementId]="data.id" [leftCorner]="rectLeftCorner" [width]="data.width" [height]="data.height" [radius]="options.radius"
+              [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+              [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rect>
+<raphael-multiline-text [text]="data.name" [position]="textPosition" [elementWidth]="data.width"></raphael-multiline-text>
+<diagram-tooltip [data]="data"></diagram-tooltip>

lib/insights/diagram/components/activities/diagram-task.component.ts

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-task',
+    templateUrl: './diagram-task.component.html'
+})
+export class DiagramTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    rectLeftCorner: any;
+    textPosition: any;
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: 4};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.rectLeftCorner = {x: this.data.x, y: this.data.y};
+        this.textPosition =  {x: this.data.x + ( this.data.width / 2 ), y: this.data.y + ( this.data.height / 2 )};
+
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.ACTIVITY_STROKE_COLOR);
+        this.options.strokeWidth = this.diagramColorService.getBpmnStrokeWidth(this.data);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+    }
+}

lib/insights/diagram/components/activities/diagram-user-task.component.html

@@ -0,0 +1,2 @@
+<diagram-task [data]="data"></diagram-task>
+<diagram-icon-user-task [data]="data"></diagram-icon-user-task>

lib/insights/diagram/components/activities/diagram-user-task.component.ts

@@ -0,0 +1,34 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-user-task',
+    templateUrl: './diagram-user-task.component.html'
+})
+export class DiagramUserTaskComponent {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+}

lib/insights/diagram/components/activities/index.ts

@@ -0,0 +1,69 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { DiagramAlfrescoPublishTaskComponent } from './diagram-alfresco-publish-task.component';
+import { DiagramBoxPublishTaskComponent } from './diagram-box-publish-task.component';
+import { DiagramBusinessRuleTaskComponent } from './diagram-business-rule-task.component';
+import { DiagramCamelTaskComponent } from './diagram-camel-task.component';
+import { DiagramContainerServiceTaskComponent } from './diagram-container-service-task.component';
+import { DiagramGoogleDrivePublishTaskComponent } from './diagram-google-drive-publish-task.component';
+import { DiagramManualTaskComponent } from './diagram-manual-task.component';
+import { DiagramMuleTaskComponent } from './diagram-mule-task.component';
+import { DiagramReceiveTaskComponent } from './diagram-receive-task.component';
+import { DiagramRestCallTaskComponent } from './diagram-rest-call-task.component';
+import { DiagramScriptTaskComponent } from './diagram-script-task.component';
+import { DiagramSendTaskComponent } from './diagram-send-task.component';
+import { DiagramServiceTaskComponent } from './diagram-service-task.component';
+import { DiagramTaskComponent } from './diagram-task.component';
+import { DiagramUserTaskComponent } from './diagram-user-task.component';
+
+// primitives
+export * from './diagram-container-service-task.component';
+export * from './diagram-task.component';
+export * from './diagram-service-task.component';
+export * from './diagram-send-task.component';
+export * from './diagram-user-task.component';
+export * from './diagram-manual-task.component';
+export * from './diagram-camel-task.component';
+export * from './diagram-mule-task.component';
+export * from './diagram-alfresco-publish-task.component';
+export * from './diagram-rest-call-task.component';
+export * from './diagram-google-drive-publish-task.component';
+export * from './diagram-box-publish-task.component';
+export * from './diagram-receive-task.component';
+export * from './diagram-script-task.component';
+export * from './diagram-business-rule-task.component';
+
+export const DIAGRAM_ACTIVITIES_DIRECTIVES: any[] = [
+    DiagramContainerServiceTaskComponent,
+    DiagramTaskComponent,
+    DiagramServiceTaskComponent,
+    DiagramSendTaskComponent,
+    DiagramUserTaskComponent,
+    DiagramManualTaskComponent,
+    DiagramCamelTaskComponent,
+    DiagramMuleTaskComponent,
+    DiagramAlfrescoPublishTaskComponent,
+    DiagramRestCallTaskComponent,
+    DiagramGoogleDrivePublishTaskComponent,
+    DiagramBoxPublishTaskComponent,
+    DiagramReceiveTaskComponent,
+    DiagramScriptTaskComponent,
+    DiagramBusinessRuleTaskComponent
+];

lib/insights/diagram/components/boundary-events/diagram-boundary-event.component.html

@@ -0,0 +1,6 @@
+<raphael-circle [center]="center" [radius]="circleRadiusInner" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<raphael-circle [elementId]="data.id" [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<diagram-container-icon-event [data]="data" [type]="data.eventDefinition.type" [fillColor]="signalFillColor"></diagram-container-icon-event>
+<diagram-tooltip [data]="data"></diagram-tooltip>

lib/insights/diagram/components/boundary-events/diagram-boundary-event.component.ts

@@ -0,0 +1,58 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-boundary-event',
+    templateUrl: './diagram-boundary-event.component.html'
+})
+export class DiagramBoundaryEventComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    center: any = {};
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 1};
+
+    signalFillColor: string;
+
+    circleRadiusInner: number;
+    circleRadiusOuter: number;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.center.x = this.data.x + (this.data.width / 2);
+        this.center.y = this.data.y + (this.data.height / 2);
+
+        this.circleRadiusInner = 12;
+        this.circleRadiusOuter = 15;
+
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+
+        this.signalFillColor = 'none';
+    }
+}

lib/insights/diagram/components/boundary-events/diagram-throw-event.component.html

@@ -0,0 +1,7 @@
+<raphael-circle [center]="center" [radius]="circleRadiusInner" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<raphael-circle [elementId]="data.id" [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<diagram-container-icon-event [data]="data" [type]="data.eventDefinition && data.eventDefinition.type"
+                              [fillColor]="signalFillColor"></diagram-container-icon-event>
+<diagram-tooltip [data]="data"></diagram-tooltip>

lib/insights/diagram/components/boundary-events/diagram-throw-event.component.ts

@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-throw-event',
+    templateUrl: './diagram-throw-event.component.html'
+})
+export class DiagramThrowEventComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    center: any = {};
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 1};
+
+    signalFillColor: string;
+
+    circleRadiusInner: number;
+    circleRadiusOuter: number;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {
+    }
+
+    ngOnInit() {
+        this.center.x = this.data.x + (this.data.width / 2);
+        this.center.y = this.data.y + (this.data.height / 2);
+
+        this.circleRadiusInner = 12;
+        this.circleRadiusOuter = 15;
+
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+
+        this.signalFillColor = 'black';
+    }
+}

lib/insights/diagram/components/boundary-events/index.ts

@@ -0,0 +1,30 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { DiagramBoundaryEventComponent } from './diagram-boundary-event.component';
+import { DiagramThrowEventComponent } from './diagram-throw-event.component';
+
+// primitives
+export * from './diagram-boundary-event.component';
+export * from './diagram-throw-event.component';
+
+export const DIAGRAM_BOUNDARY_EVENTS_DIRECTIVES: any[] = [
+    DiagramBoundaryEventComponent,
+    DiagramThrowEventComponent
+];

lib/insights/diagram/components/diagram-sequence-flow.component.html

@@ -0,0 +1,2 @@
+<raphael-flow-arrow [flow]="flow"></raphael-flow-arrow>
+<diagram-tooltip [data]="flow"></diagram-tooltip>

lib/insights/diagram/components/diagram-sequence-flow.component.ts

@@ -0,0 +1,36 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'adf-diagram-sequence-flow, diagram-sequence-flow',
+    templateUrl: './diagram-sequence-flow.component.html'
+})
+export class DiagramSequenceFlowComponent implements OnInit {
+    @Input()
+    flow: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+    }
+}

lib/insights/diagram/components/diagram.component.boundary.spec.ts

@@ -0,0 +1,703 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugElement } from '@angular/core';
+import * as boundaryEventMock from '../../mock/diagram/diagramBoundary.mock';
+import { DiagramComponent } from './index';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+
+declare let jasmine: any;
+
+describe('Diagrams boundary', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        component.processInstanceId = '38399';
+        component.processDefinitionId = 'fakeprocess:24:38399';
+        component.metricPercentages = { startEvent: 0 };
+    });
+
+    afterEach(() => {
+        component.success.unsubscribe();
+        jasmine.Ajax.uninstall();
+    });
+
+    let ajaxReply =  (resp: any) => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200,
+            contentType: 'json',
+            responseText: resp
+        });
+    };
+
+    describe('Diagrams component Boundary events with process instance id: ', () => {
+
+        it('Should render the Boundary time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryTimeEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Boundary time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryTimeEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Boundary time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryTimeEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Boundary error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Boundary error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryErrorEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Boundary error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryErrorEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Boundary signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundarySignalEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Boundary signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundarySignalEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Boundary signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundarySignalEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Boundary signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Boundary signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryMessageEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Boundary signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryMessageEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Boundary signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Boundary signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryMessageEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Boundary signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-boundary-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryMessageEventCompleted] };
+            ajaxReply(resp);
+        }));
+    });
+
+    describe('Diagrams component Boundary events: ', () => {
+
+        it('Should render the Boundary time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryTimeEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Boundary error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Boundary signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundarySignalEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Boundary signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Boundary signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-boundary-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-boundary-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [boundaryEventMock.boundaryMessageEvent] };
+            ajaxReply(resp);
+        }));
+    });
+
+});

lib/insights/diagram/components/diagram.component.catching.events.spec.ts

@@ -0,0 +1,579 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugElement } from '@angular/core';
+import * as intermediateCatchingMock from '../../mock/diagram/diagramIntermediate.mock';
+import { DiagramComponent } from './index';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+
+declare let jasmine: any;
+
+describe('Diagrams Catching', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        component.processInstanceId = '38399';
+        component.processDefinitionId = 'fakeprocess:24:38399';
+        component.metricPercentages = { startEvent: 0 };
+    });
+
+    afterEach(() => {
+        component.success.unsubscribe();
+        jasmine.Ajax.uninstall();
+    });
+
+    let ajaxReply =  (resp: any) => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200,
+            contentType: 'json',
+            responseText: resp
+        });
+    };
+
+    describe('Diagrams component Intermediate Catching events: ', () => {
+
+        it('Should render the Intermediate catching time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingTimeEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Intermediate catching error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Intermediate catching signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingSignalEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Intermediate catching signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingMessageEvent] };
+            ajaxReply(resp);
+        }));
+    });
+
+    describe('Diagrams component Intermediate Catching events with process instance id: ', () => {
+
+        it('Should render the Intermediate catching time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingTimeEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Intermediate catching time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingTimeEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Intermediate catching time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingTimeEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Intermediate catching error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Intermediate catching error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingErrorEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Intermediate catching error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingErrorEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Intermediate catching signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingSignalEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Intermediate Active catching signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingSignalEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Intermediate catching signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingSignalEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Intermediate catching signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Intermediate catching signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingMessageEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Intermediate catching signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-intermediate-catching-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-intermediate-catching-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-intermediate-catching-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [intermediateCatchingMock.intermediateCatchingMessageEventCompleted] };
+            ajaxReply(resp);
+        }));
+    });
+
+});

lib/insights/diagram/components/diagram.component.css

@@ -0,0 +1,3 @@
+.diagram {
+    border: 1px solid lightgray; overflow:auto
+}

lib/insights/diagram/components/diagram.component.events.spec.ts

@@ -0,0 +1,643 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugElement } from '@angular/core';
+import * as diagramsEventsMock from '../../mock/diagram/diagramEvents.mock';
+import { DiagramComponent } from './index';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+
+declare let jasmine: any;
+
+describe('Diagrams events', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        component.processInstanceId = '38399';
+        component.processDefinitionId = 'fakeprocess:24:38399';
+        component.metricPercentages = { startEvent: 0 };
+    });
+
+    afterEach(() => {
+        component.success.unsubscribe();
+        jasmine.Ajax.uninstall();
+    });
+
+    let ajaxReply =  (resp: any) => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200,
+            contentType: 'json',
+            responseText: resp
+        });
+    };
+
+    describe('Diagrams component Events: ', () => {
+
+        it('Should render the Start Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Start Timer Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+
+            let resp = { elements: [diagramsEventsMock.startTimeEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Start Signal Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startSignalEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Start Message Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Start Error Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the End Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.endEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the End Error Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.endErrorEvent] };
+            ajaxReply(resp);
+        }));
+    });
+
+    describe('Diagrams component Events with process instance id: ', () => {
+
+        it('Should render the Start Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Start Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Start Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Start Timer Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startTimeEvent] };
+
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Start Timer Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startTimeEventActive] };
+
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Start Timer Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-timer > raphael-icon-timer');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startTimeEventCompleted] };
+
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Start Signal Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startSignalEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Start Signal Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startSignalEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Start Signal Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-signal > raphael-icon-signal');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startSignalEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Start Message Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Start Message Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startMessageEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Start Message Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-message > raphael-icon-message');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startMessageEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Start Error Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Start Error Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startErrorEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Start Error Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-start-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-start-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.startErrorEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the End Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.endEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active End Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.endEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed End Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.endEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the End Error Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.endErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active End Error Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.endErrorEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed End Error Event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).toBeDefined();
+                    let event: any = element.querySelector('diagram-end-event > diagram-event > raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(event).not.toBeNull();
+
+                    let iconEvent: any = element.querySelector('diagram-end-event > diagram-event >' +
+                        ' diagram-container-icon-event > div > div > diagram-icon-error > raphael-icon-error');
+                    expect(iconEvent).not.toBeNull();
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsEventsMock.endErrorEventCompleted] };
+            ajaxReply(resp);
+        }));
+    });
+
+});

lib/insights/diagram/components/diagram.component.flows.spec.ts

@@ -0,0 +1,119 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugElement } from '@angular/core';
+import * as flowsMock from '../../mock/diagram/diagramFlows.mock';
+import { DiagramComponent } from './index';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+
+declare let jasmine: any;
+
+describe('Diagrams flows', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        component.processInstanceId = '38399';
+        component.processDefinitionId = 'fakeprocess:24:38399';
+        component.metricPercentages = { startEvent: 0 };
+    });
+
+    afterEach(() => {
+        component.success.unsubscribe();
+        jasmine.Ajax.uninstall();
+    });
+
+    let ajaxReply =  (resp: any) => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200,
+            contentType: 'json',
+            responseText: resp
+        });
+    };
+
+    describe('Diagrams component Flows with process instance id: ', () => {
+
+        it('Should render the flow', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-sequence-flow > raphael-flow-arrow');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.flows[0].id);
+                    expect(tooltip.textContent).toContain(res.flows[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { flows: [flowsMock.flow] };
+            ajaxReply(resp);
+        }));
+    });
+
+    describe('Diagrams component Flows: ', () => {
+
+        it('Should render the flow', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-sequence-flow > raphael-flow-arrow');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.flows[0].id);
+                    expect(tooltip.textContent).toContain(res.flows[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { flows: [flowsMock.flow] };
+            ajaxReply(resp);
+        }));
+    });
+
+});

lib/insights/diagram/components/diagram.component.gateways.spec.ts

@@ -0,0 +1,459 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugElement } from '@angular/core';
+import * as diagramsGatewaysMock from '../../mock/diagram/diagramGateways.mock';
+import { DiagramComponent } from './index';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+
+declare let jasmine: any;
+
+describe('Diagrams gateways', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        component.processInstanceId = '38399';
+        component.processDefinitionId = 'fakeprocess:24:38399';
+        component.metricPercentages = { startEvent: 0 };
+    });
+
+    afterEach(() => {
+        component.success.unsubscribe();
+        jasmine.Ajax.uninstall();
+    });
+
+    let ajaxReply =  (resp: any) => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200,
+            contentType: 'json',
+            responseText: resp
+        });
+    };
+
+    describe('Diagrams component Gateways: ', () => {
+
+        it('Should render the Exclusive Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.exclusiveGatway] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Inclusive Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.inclusiveGatway] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Parallel Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.parallelGatway] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Event Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-event-gateway');
+                    expect(shape1).not.toBeNull();
+                    expect(shape1.children.length).toBe(4);
+
+                    let outerCircle = shape1.children[1];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape1.children[2];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
+                    expect(shape2).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.eventGatway] };
+            ajaxReply(resp);
+        }));
+    });
+
+    describe('Diagrams component Gateways with process instance id: ', () => {
+
+        it('Should render the Exclusive Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.exclusiveGatway] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Exclusive Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.exclusiveGatwayActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Exclusive Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-exclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-exclusive-gateway > raphael-cross');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.exclusiveGatwayCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Inclusive Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.inclusiveGatway] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Inclusive Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.inclusiveGatwayActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Inclusive Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-inclusive-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-inclusive-gateway > raphael-circle');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.inclusiveGatwayCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Parallel Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.parallelGatway] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Parallel Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.parallelGatwayActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Parallel Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-parallel-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-parallel-gateway > raphael-plus');
+                    expect(shape1).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.parallelGatwayCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Event Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-event-gateway');
+                    expect(shape1).not.toBeNull();
+                    expect(shape1.children.length).toBe(4);
+
+                    let outerCircle = shape1.children[1];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape1.children[2];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
+                    expect(shape2).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.eventGatway] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Event Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-event-gateway');
+                    expect(shape1).not.toBeNull();
+                    expect(shape1.children.length).toBe(4);
+
+                    let outerCircle = shape1.children[1];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape1.children[2];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
+                    expect(shape2).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.eventGatwayActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Event Gateway', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-gateway > diagram-gateway > raphael-rhombus[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let shape1: any = element.querySelector('diagram-event-gateway');
+                    expect(shape1).not.toBeNull();
+                    expect(shape1.children.length).toBe(4);
+
+                    let outerCircle = shape1.children[1];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape1.children[2];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let shape2: any = element.querySelector('diagram-event-gateway > raphael-pentagon');
+                    expect(shape2).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [diagramsGatewaysMock.eventGatwayCompleted] };
+            ajaxReply(resp);
+        }));
+    });
+
+});

lib/insights/diagram/components/diagram.component.html

@@ -0,0 +1,67 @@
+<div *ngIf="diagram" class="diagram">
+    <div *ngFor="let element of diagram.elements">
+        <div [ngSwitch]="element.type">
+            <div *ngSwitchCase="'StartEvent'">
+                <diagram-start-event [data]="element"></diagram-start-event>
+            </div>
+            <div *ngSwitchCase="'ExclusiveGateway'">
+                <diagram-exclusive-gateway [data]="element"></diagram-exclusive-gateway>
+            </div>
+            <div *ngSwitchCase="'InclusiveGateway'">
+                <diagram-inclusive-gateway [data]="element"></diagram-inclusive-gateway>
+            </div>
+            <div *ngSwitchCase="'EventGateway'">
+                <diagram-event-gateway [data]="element"></diagram-event-gateway>
+            </div>
+            <div *ngSwitchCase="'ParallelGateway'">
+                <diagram-parallel-gateway [data]="element"></diagram-parallel-gateway>
+            </div>
+            <div *ngSwitchCase="'EndEvent'">
+                <diagram-end-event [data]="element"></diagram-end-event>
+            </div>
+            <div *ngSwitchCase="'UserTask'">
+                <diagram-user-task [data]="element"></diagram-user-task>
+            </div>
+            <div *ngSwitchCase="'ManualTask'">
+                <diagram-manual-task [data]="element"></diagram-manual-task>
+            </div>
+            <div *ngSwitchCase="'ServiceTask'">
+                <diagram-container-service-task [data]="element"></diagram-container-service-task>
+            </div>
+            <div *ngSwitchCase="'ReceiveTask'">
+                <diagram-receive-task [data]="element"></diagram-receive-task>
+            </div>
+            <div *ngSwitchCase="'ScriptTask'">
+                <diagram-script-task [data]="element"></diagram-script-task>
+            </div>
+            <div *ngSwitchCase="'BusinessRuleTask'">
+                <diagram-business-rule-task [data]="element"></diagram-business-rule-task>
+            </div>
+            <div *ngSwitchCase="'BoundaryEvent'">
+                <diagram-boundary-event [data]="element"></diagram-boundary-event>
+            </div>
+            <div *ngSwitchCase="'ThrowEvent'">
+                <diagram-throw-event [data]="element"></diagram-throw-event>
+            </div>
+            <div *ngSwitchCase="'IntermediateCatchEvent'">
+                <diagram-intermediate-catching-event [data]="element"></diagram-intermediate-catching-event>
+            </div>
+            <div *ngSwitchCase="'SubProcess'">
+                <diagram-subprocess [data]="element"></diagram-subprocess>
+            </div>
+            <div *ngSwitchCase="'EventSubProcess'">
+                <diagram-event-subprocess [data]="element"></diagram-event-subprocess>
+            </div>
+        </div>
+    </div>
+    <div *ngFor="let flow of diagram.flows">
+        <div [ngSwitch]="flow.type">
+            <div *ngSwitchCase="'sequenceFlow'">
+                <diagram-sequence-flow [flow]="flow"></diagram-sequence-flow>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="diagram.pools">
+        <diagram-pools [pools]="diagram.pools"></diagram-pools>
+    </div>
+</div>

lib/insights/diagram/components/diagram.component.structural.spec.ts

@@ -0,0 +1,227 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugElement } from '@angular/core';
+import * as structuralMock from '../../mock/diagram/diagramStructural.mock';
+import { DiagramComponent } from './index';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+
+declare let jasmine: any;
+
+describe('Diagrams structural', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        component.processInstanceId = '38399';
+        component.processDefinitionId = 'fakeprocess:24:38399';
+        component.metricPercentages = { startEvent: 0 };
+    });
+
+    afterEach(() => {
+        component.success.unsubscribe();
+        jasmine.Ajax.uninstall();
+    });
+
+    let ajaxReply =  (resp: any) => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200,
+            contentType: 'json',
+            responseText: resp
+        });
+    };
+
+    describe('Diagrams component Structural: ', () => {
+
+        it('Should render the Subprocess', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-subprocess > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [structuralMock.subProcess] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Event Subprocess', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [structuralMock.eventSubProcess] };
+            ajaxReply(resp);
+        }));
+    });
+
+    describe('Diagrams component Structural with process instance id: ', () => {
+
+        it('Should render the Subprocess', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-subprocess > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [structuralMock.subProcess] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Subprocess', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-subprocess > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [structuralMock.subProcessActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Subprocess', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-subprocess > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [structuralMock.subProcessCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Event Subprocess', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [structuralMock.eventSubProcess] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Event Subprocess', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect[ng-reflect-stroke="#017501"]');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [structuralMock.eventSubProcessActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Event Subprocess', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-event-subprocess > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    expect(shape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [structuralMock.eventSubProcessCompleted] };
+            ajaxReply(resp);
+        }));
+    });
+
+});

lib/insights/diagram/components/diagram.component.swim.spec.ts

@@ -0,0 +1,161 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugElement } from '@angular/core';
+import * as swimLanesMock from '../../mock/diagram/diagramSwimlanes.mock';
+import { DiagramComponent } from './index';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+
+declare let jasmine: any;
+
+describe('Diagrams swim', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        component.processInstanceId = '38399';
+        component.processDefinitionId = 'fakeprocess:24:38399';
+        component.metricPercentages = { startEvent: 0 };
+    });
+
+    afterEach(() => {
+        component.success.unsubscribe();
+        jasmine.Ajax.uninstall();
+    });
+
+    let ajaxReply =  (resp: any) => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200,
+            contentType: 'json',
+            responseText: resp
+        });
+    };
+
+    describe('Diagrams component Swim lane: ', () => {
+
+        it('Should render the Pool', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-pool > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let shapeText: any = element.querySelector('diagram-pool > raphael-text');
+                    expect(shapeText).not.toBeNull();
+                    expect(shapeText.attributes[2].value).toEqual('Activiti');
+                });
+            });
+            component.ngOnChanges();
+            let resp = { pools: [swimLanesMock.pool] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Pool with Lanes', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shapeLane: any = element.querySelector('diagram-lanes > div > div > diagram-lane');
+                    expect(shapeLane).not.toBeNull();
+
+                    let shapeRect: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-rect');
+                    expect(shapeRect).not.toBeNull();
+
+                    let shapeText: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-text');
+                    expect(shapeText).not.toBeNull();
+                    expect(shapeText.attributes[2].value).toEqual('Beckend');
+                });
+            });
+            component.ngOnChanges();
+            let resp = { pools: [swimLanesMock.poolLanes] };
+            ajaxReply(resp);
+        }));
+    });
+
+    describe('Diagrams component Swim lane with process instance id: ', () => {
+
+        it('Should render the Pool', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-pool > raphael-rect');
+                    expect(shape).not.toBeNull();
+
+                    let shapeText: any = element.querySelector('diagram-pool > raphael-text');
+                    expect(shapeText).not.toBeNull();
+                    expect(shapeText.attributes[2].value).toEqual('Activiti');
+                });
+            });
+            component.ngOnChanges();
+            let resp = { pools: [swimLanesMock.pool] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Pool with Lanes', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shapeLane: any = element.querySelector('diagram-lanes > div > div > diagram-lane');
+                    expect(shapeLane).not.toBeNull();
+
+                    let shapeRect: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-rect');
+                    expect(shapeRect).not.toBeNull();
+
+                    let shapeText: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-text');
+                    expect(shapeText).not.toBeNull();
+                    expect(shapeText.attributes[2].value).toEqual('Beckend');
+                });
+            });
+            component.ngOnChanges();
+            let resp = { pools: [swimLanesMock.poolLanes] };
+            ajaxReply(resp);
+        }));
+    });
+
+});

lib/insights/diagram/components/diagram.component.throw.spec.ts

@@ -0,0 +1,687 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DebugElement } from '@angular/core';
+import * as throwEventMock from '../../mock/diagram/diagramThrow.mock';
+import { DiagramComponent } from './index';
+import { DIAGRAM_DIRECTIVES, DIAGRAM_PROVIDERS } from './index';
+import { RAPHAEL_DIRECTIVES, RAPHAEL_PROVIDERS } from './raphael/index';
+
+declare let jasmine: any;
+
+describe('Diagrams throw', () => {
+
+    let component: any;
+    let fixture: ComponentFixture<DiagramComponent>;
+    let debug: DebugElement;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [
+                ...DIAGRAM_DIRECTIVES,
+                ...RAPHAEL_DIRECTIVES
+            ],
+            providers: [
+                ...DIAGRAM_PROVIDERS,
+                ...RAPHAEL_PROVIDERS
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DiagramComponent);
+        component = fixture.componentInstance;
+        debug = fixture.debugElement;
+        element = fixture.nativeElement;
+        fixture.detectChanges();
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        component.processInstanceId = '38399';
+        component.processDefinitionId = 'fakeprocess:24:38399';
+        component.metricPercentages = { startEvent: 0 };
+    });
+
+    afterEach(() => {
+        component.success.unsubscribe();
+        jasmine.Ajax.uninstall();
+    });
+
+    let ajaxReply =  (resp: any) => {
+        jasmine.Ajax.requests.mostRecent().respondWith({
+            status: 200,
+            contentType: 'json',
+            responseText: resp
+        });
+    };
+
+    describe('Diagrams component Throw events with process instance id: ', () => {
+
+        it('Should render the Throw time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwTimeEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Throw time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwTimeEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Throw time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwTimeEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Throw error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Throw error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwErrorEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Throw error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwErrorEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Throw signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwSignalEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Throw signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwSignalEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Throw signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwSignalEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Throw signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Throw signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwMessageEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Throw signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwMessageEventCompleted] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Throw signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Active Throw signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#017501"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwMessageEventActive] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Completed Throw signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+
+                    let coloredShape: any = element.querySelector('diagram-throw-event>raphael-circle[ng-reflect-stroke="#2632aa"]');
+                    expect(coloredShape).not.toBeNull();
+
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwMessageEventCompleted] };
+            ajaxReply(resp);
+        }));
+    });
+
+    describe('Diagrams component Throw events: ', () => {
+
+        it('Should render the Throw time event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-timer');
+                    expect(iconShape).not.toBeNull();
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwTimeEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Throw error event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-error');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwErrorEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Throw signal event', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-signal');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwSignalEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Throw signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwMessageEvent] };
+            ajaxReply(resp);
+        }));
+
+        it('Should render the Throw signal message', async(() => {
+            component.success.subscribe((res) => {
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(res).not.toBeNull();
+                    let shape: any = element.querySelector('diagram-throw-event');
+                    expect(shape).not.toBeNull();
+                    expect(shape.children.length).toBe(4);
+
+                    let outerCircle = shape.children[0];
+                    expect(outerCircle.localName).toEqual('raphael-circle');
+
+                    let innerCircle = shape.children[1];
+                    expect(innerCircle.localName).toEqual('raphael-circle');
+
+                    let iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
+                        ' div > div > diagram-icon-message');
+                    expect(iconShape).not.toBeNull();
+
+                    let tooltip: any = element.querySelector('diagram-tooltip > div');
+                    expect(tooltip.textContent).toContain(res.elements[0].id);
+                    expect(tooltip.textContent).toContain(res.elements[0].type);
+                });
+            });
+            component.ngOnChanges();
+            let resp = { elements: [throwEventMock.throwMessageEvent] };
+            ajaxReply(resp);
+        }));
+    });
+
+});

lib/insights/diagram/components/diagram.component.ts

@@ -0,0 +1,123 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { DiagramElementModel, DiagramModel } from '../models/diagram.model';
+import { DiagramColorService } from '../services/diagram-color.service';
+import { DiagramsService } from '../services/diagrams.service';
+import { RaphaelService } from './raphael/raphael.service';
+
+@Component({
+    selector: 'adf-diagram',
+    styleUrls: ['./diagram.component.css'],
+    templateUrl: './diagram.component.html'
+})
+export class DiagramComponent implements OnChanges {
+    @Input()
+    processDefinitionId: any;
+
+    @Input()
+    processInstanceId: any;
+
+    @Input()
+    metricPercentages: any;
+
+    @Input()
+    metricColor: any;
+
+    @Input()
+    metricType: string = '';
+
+    @Input()
+    width: number = 1000;
+
+    @Input()
+    height: number = 500;
+
+    @Output()
+    success = new EventEmitter();
+
+    @Output()
+    error = new EventEmitter();
+
+    PADDING_WIDTH: number = 60;
+    PADDING_HEIGHT: number = 60;
+
+    diagram: DiagramModel;
+
+    constructor(private diagramColorService: DiagramColorService,
+                private raphaelService: RaphaelService,
+                private diagramsService: DiagramsService) {
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        this.reset();
+        this.diagramColorService.setTotalColors(this.metricColor);
+        if (this.processDefinitionId) {
+            this.getProcessDefinitionModel(this.processDefinitionId);
+        } else {
+            this.getRunningProcessDefinitionModel(this.processInstanceId);
+        }
+    }
+
+    getRunningProcessDefinitionModel(processInstanceId: string) {
+        this.diagramsService.getRunningProcessDefinitionModel(processInstanceId).subscribe(
+            (res: any) => {
+                this.diagram = new DiagramModel(res);
+                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH,
+                                            this.diagram.diagramHeight + this.PADDING_HEIGHT);
+                this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType);
+                this.success.emit(res);
+            },
+            (err: any) => {
+                this.error.emit(err);
+            }
+        );
+    }
+
+    getProcessDefinitionModel(processDefinitionId: string) {
+        this.diagramsService.getProcessDefinitionModel(processDefinitionId).subscribe(
+            (res: any) => {
+                this.diagram = new DiagramModel(res);
+                this.raphaelService.setting(this.diagram.diagramWidth + this.PADDING_WIDTH,
+                                            this.diagram.diagramHeight + this.PADDING_HEIGHT);
+                this.setMetricValueToDiagramElement(this.diagram, this.metricPercentages, this.metricType);
+                this.success.emit(res);
+            },
+            (err: any) => {
+                this.error.emit(err);
+            }
+        );
+    }
+
+    setMetricValueToDiagramElement(diagram: DiagramModel, metrics: any, metricType: string) {
+        for (let key in metrics) {
+            if (metrics.hasOwnProperty(key)) {
+                let foundElement: DiagramElementModel = diagram.elements.find(
+                    (element: DiagramElementModel) => element.id === key);
+                if (foundElement) {
+                    foundElement.value = metrics[key];
+                    foundElement.dataType = metricType;
+                }
+            }
+        }
+    }
+
+    reset() {
+        this.raphaelService.reset();
+    }
+}

lib/insights/diagram/components/events/diagram-end-event.component.html

@@ -0,0 +1 @@
+<diagram-event [data]="data" [options]="options" [iconFillColor]="iconFillColor"></diagram-event>

lib/insights/diagram/components/events/diagram-end-event.component.ts

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-end-event',
+    templateUrl: './diagram-end-event.component.html'
+})
+export class DiagramEndEventComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
+    iconFillColor: any;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+
+        this.options.radius = 14;
+        this.options.strokeWidth = 4;
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+
+        this.iconFillColor = 'black';
+    }
+}

lib/insights/diagram/components/events/diagram-event.component.html

@@ -0,0 +1,5 @@
+<raphael-circle [elementId]="data.id" [center]="center" [radius]="options.radius" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<diagram-container-icon-event [data]="data" [type]="data.eventDefinition && data.eventDefinition.type"
+                              [fillColor]="iconFillColor"></diagram-container-icon-event>
+<diagram-tooltip [data]="data"></diagram-tooltip>

lib/insights/diagram/components/events/diagram-event.component.ts

@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-event',
+    templateUrl: './diagram-event.component.html'
+})
+export class DiagramEventComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Input()
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
+
+    @Input()
+    iconFillColor: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    center: any = {};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+
+        this.center.x = this.data.x + (this.data.width / 2);
+        this.center.y = this.data.y + (this.data.height / 2);
+    }
+}

lib/insights/diagram/components/events/diagram-start-event.component.html

@@ -0,0 +1 @@
+<diagram-event [data]="data" [options]="options" [iconFillColor]="iconFillColor"></diagram-event>

lib/insights/diagram/components/events/diagram-start-event.component.ts

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-start-event',
+    templateUrl: './diagram-start-event.component.html'
+})
+export class DiagramStartEventComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: '', radius: ''};
+    iconFillColor: any;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+
+        this.options.radius = 15;
+        this.options.strokeWidth = 1;
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+
+        this.iconFillColor = 'none';
+    }
+}

lib/insights/diagram/components/events/index.ts

@@ -0,0 +1,33 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { DiagramEndEventComponent } from './diagram-end-event.component';
+import { DiagramEventComponent } from './diagram-event.component';
+import { DiagramStartEventComponent } from './diagram-start-event.component';
+
+// primitives
+export * from './diagram-event.component';
+export * from './diagram-start-event.component';
+export * from './diagram-end-event.component';
+
+export const DIAGRAM_EVENTS_DIRECTIVES: any[] = [
+    DiagramEventComponent,
+    DiagramStartEventComponent,
+    DiagramEndEventComponent
+];

lib/insights/diagram/components/gateways/diagram-event-gateway.component.html

@@ -0,0 +1,7 @@
+<diagram-gateway [data]="data"></diagram-gateway>
+<raphael-circle [center]="center" [radius]="circleRadiusInner" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<raphael-circle [center]="center" [radius]="circleRadiusOuter" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>
+<raphael-pentagon [center]="centerPentagon" [strokeWidth]="pentaStrokeWidth" [stroke]="options.stroke"
+                  [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-pentagon>

lib/insights/diagram/components/gateways/diagram-event-gateway.component.ts

@@ -0,0 +1,56 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-event-gateway',
+    templateUrl: './diagram-event-gateway.component.html'
+})
+export class DiagramEventGatewayComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    center: any = {};
+    centerPentagon: any = {};
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 0.5};
+
+    circleRadiusInner = 10.4;
+    circleRadiusOuter = 11.7;
+
+    pentaStrokeWidth = 1.39999998;
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.center.x = this.data.x + (this.data.width / 2);
+        this.center.y = this.data.y + (this.data.height / 2);
+        this.centerPentagon.x = this.data.x;
+        this.centerPentagon.y = this.data.y;
+
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+    }
+}

lib/insights/diagram/components/gateways/diagram-exclusive-gateway.component.html

@@ -0,0 +1,3 @@
+<diagram-gateway [data]="data"></diagram-gateway>
+<raphael-cross [center]="center" [width]="width" [height]="height" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+               [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-cross>

lib/insights/diagram/components/gateways/diagram-exclusive-gateway.component.ts

@@ -0,0 +1,52 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-exclusive-gateway',
+    templateUrl: './diagram-exclusive-gateway.component.html'
+})
+export class DiagramExclusiveGatewayComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    center: any = {};
+    width: any;
+    height: any;
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 3};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.center.x = this.data.x;
+        this.center.y = this.data.y;
+        this.width = this.data.width;
+        this.height = this.data.height;
+
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+    }
+}

lib/insights/diagram/components/gateways/diagram-gateway.component.html

@@ -0,0 +1,3 @@
+<raphael-rhombus [elementId]="data.id" [center]="center" [width]="width" [height]="height" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                 [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-rhombus>
+<diagram-tooltip [data]="data"></diagram-tooltip>

lib/insights/diagram/components/gateways/diagram-gateway.component.ts

@@ -0,0 +1,52 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-gateway',
+    templateUrl: './diagram-gateway.component.html'
+})
+export class DiagramGatewayComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    center: any = {};
+    width: any;
+    height: any;
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 2};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.center.x = this.data.x;
+        this.center.y = this.data.y;
+        this.width = this.data.width;
+        this.height = this.data.height;
+
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+    }
+}

lib/insights/diagram/components/gateways/diagram-inclusive-gateway.component.html

@@ -0,0 +1,3 @@
+<diagram-gateway [data]="data"></diagram-gateway>
+<raphael-circle [center]="center" [radius]="options.radius" [strokeWidth]="options.strokeWidth" [stroke]="options.stroke"
+                [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-circle>

lib/insights/diagram/components/gateways/diagram-inclusive-gateway.component.ts

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-inclusive-gateway',
+    templateUrl: './diagram-inclusive-gateway.component.html'
+})
+export class DiagramInclusiveGatewayComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    center: any = {};
+    width: any;
+    height: any;
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 2.5, radius: 9.75};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.center.x = this.data.x + (this.data.width / 2);
+        this.center.y = this.data.y + (this.data.height / 2);
+
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+    }
+}

lib/insights/diagram/components/gateways/diagram-parallel-gateway.component.html

@@ -0,0 +1,3 @@
+<diagram-gateway [data]="data"></diagram-gateway>
+<raphael-plus [center]="center" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                 [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-plus>

lib/insights/diagram/components/gateways/diagram-parallel-gateway.component.ts

@@ -0,0 +1,52 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DiagramColorService } from '../../services/diagram-color.service';
+
+@Component({
+    selector: 'diagram-parallel-gateway',
+    templateUrl: './diagram-parallel-gateway.component.html'
+})
+export class DiagramParallelGatewayComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    center: any = {};
+    width: any;
+    height: any;
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: 3};
+
+    constructor(public elementRef: ElementRef,
+                private diagramColorService: DiagramColorService) {}
+
+    ngOnInit() {
+        this.center.x = this.data.x;
+        this.center.y = this.data.y;
+        this.width = this.data.width;
+        this.height = this.data.height;
+
+        this.options.stroke = this.diagramColorService.getBpmnColor(this.data, DiagramColorService.MAIN_STROKE_COLOR);
+        this.options.fillColors = this.diagramColorService.getFillColour(this.data.id);
+        this.options.fillOpacity = this.diagramColorService.getFillOpacity();
+    }
+}

lib/insights/diagram/components/gateways/index.ts

@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { DiagramEventGatewayComponent } from './diagram-event-gateway.component';
+import { DiagramExclusiveGatewayComponent } from './diagram-exclusive-gateway.component';
+import { DiagramGatewayComponent } from './diagram-gateway.component';
+import { DiagramInclusiveGatewayComponent } from './diagram-inclusive-gateway.component';
+import { DiagramParallelGatewayComponent } from './diagram-parallel-gateway.component';
+
+// primitives
+export * from './diagram-gateway.component';
+export * from './diagram-exclusive-gateway.component';
+export * from './diagram-inclusive-gateway.component';
+export * from './diagram-parallel-gateway.component';
+export * from './diagram-event-gateway.component';
+
+export const DIAGRAM_GATEWAY_DIRECTIVES: any[] = [
+    DiagramGatewayComponent,
+    DiagramExclusiveGatewayComponent,
+    DiagramInclusiveGatewayComponent,
+    DiagramParallelGatewayComponent,
+    DiagramEventGatewayComponent
+];

lib/insights/diagram/components/icons/diagram-container-icon-event.component.html

@@ -0,0 +1,14 @@
+<div [ngSwitch]="type">
+    <div *ngSwitchCase="'timer'">
+        <diagram-icon-timer [data]="data"></diagram-icon-timer>
+    </div>
+    <div *ngSwitchCase="'error'">
+        <diagram-icon-error [data]="data" [fillColor]="fillColor"></diagram-icon-error>
+    </div>
+    <div *ngSwitchCase="'signal'">
+        <diagram-icon-signal [data]="data" [fillColor]="fillColor"></diagram-icon-signal>
+    </div>
+    <div *ngSwitchCase="'message'">
+        <diagram-icon-message [data]="data"></diagram-icon-message>
+    </div>
+</div>

lib/insights/diagram/components/icons/diagram-container-icon-event.component.ts

@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-container-icon-event',
+    templateUrl: './diagram-container-icon-event.component.html'
+})
+export class DiagramContainerIconEventTaskComponent {
+    @Input()
+    data: any;
+
+    @Input()
+    type: string;
+
+    @Input()
+    fillColor: string;
+
+    @Output()
+    error = new EventEmitter();
+
+    constructor(public elementRef: ElementRef) {}
+}

lib/insights/diagram/components/icons/diagram-icon-alfresco-publish-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-alfresco-publish [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-alfresco-publish>

lib/insights/diagram/components/icons/diagram-icon-alfresco-publish-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-alfresco-publish-task',
+    templateUrl: './diagram-icon-alfresco-publish-task.component.html'
+})
+export class DiagramIconAlfrescoPublishTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#87C040' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-box-publish-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-box-publish [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-box-publish>

lib/insights/diagram/components/icons/diagram-icon-box-publish-task.component.ts

@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-box-publish-task',
+    templateUrl: './diagram-icon-box-publish-task.component.html'
+})
+export class DiagramIconBoxPublishTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 6, y: this.data.y + 6};
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-business-rule-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-business-rule [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-business-rule>

lib/insights/diagram/components/icons/diagram-icon-business-rule-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-business-rule-task',
+    templateUrl: './diagram-icon-business-rule-task.component.html'
+})
+export class DiagramIconBusinessRuleTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#72a7d0' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-camel-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-camel [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-camel>

lib/insights/diagram/components/icons/diagram-icon-camel-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-camel-task',
+    templateUrl: './diagram-icon-camel-task.component.html'
+})
+export class DiagramIconCamelTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 8, y: this.data.y + 6};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#bd4848' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-error.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-error [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-error>

lib/insights/diagram/components/icons/diagram-icon-error.component.ts

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-error',
+    templateUrl: './diagram-icon-error.component.html'
+})
+export class DiagramIconErrorComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Input()
+    fillColor: string;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x - 1, y: this.data.y - 1};
+
+        this.options.stroke = 'black';
+        this.options.fillColors = this.fillColor;
+        this.options.strokeWidth = 1;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-google-drive-publish-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-google-drive-publish [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-google-drive-publish>

lib/insights/diagram/components/icons/diagram-icon-google-drive-publish-task.component.ts

@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-google-drive-publish-task',
+    templateUrl: './diagram-icon-google-drive-publish-task.component.html'
+})
+export class DiagramIconGoogleDrivePublishTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 6, y: this.data.y + 6};
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-manual-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-manual [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-manual>

lib/insights/diagram/components/icons/diagram-icon-manual-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-manual-task',
+    templateUrl: './diagram-icon-manual-task.component.html'
+})
+export class DiagramIconManualTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#d1b575' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-message.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-message [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-message>

lib/insights/diagram/components/icons/diagram-icon-message.component.ts

@@ -0,0 +1,46 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-message',
+    templateUrl: './diagram-icon-message.component.html'
+})
+export class DiagramIconMessageComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 6, y: this.data.y + 6};
+
+        this.options.stroke = 'none';
+        this.options.fillColors = '#585858';
+        this.options.strokeWidth = 1;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-mule-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-mule [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-mule>

lib/insights/diagram/components/icons/diagram-icon-mule-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-mule-task',
+    templateUrl: './diagram-icon-mule-task.component.html'
+})
+export class DiagramIconMuleTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 2, y: this.data.y + 2};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#bd4848' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-receive-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-receive [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-receive>

lib/insights/diagram/components/icons/diagram-icon-receive-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-receive-task',
+    templateUrl: './diagram-icon-receive-task.component.html'
+})
+export class DiagramIconReceiveTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 2};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#16964d' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-rest-call-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-rest-call [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-rest-call>

lib/insights/diagram/components/icons/diagram-icon-rest-call-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-rest-call-task',
+    templateUrl: './diagram-icon-rest-call-task.component.html'
+})
+export class DiagramIconRestCallTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 2, y: this.data.y + 2};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#bd4848' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-script-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-script [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-script>

lib/insights/diagram/components/icons/diagram-icon-script-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-script-task',
+    templateUrl: './diagram-icon-script-task.component.html'
+})
+export class DiagramIconScriptTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#72a7d0' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-send-task.component.html

@@ -0,0 +1,3 @@
+<raphael-icon-send [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-send>
+<diagram-tooltip [data]="data"></diagram-tooltip>

lib/insights/diagram/components/icons/diagram-icon-send-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-send-task',
+    templateUrl: './diagram-icon-send-task.component.html'
+})
+export class DiagramIconSendTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#16964d' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-service-task.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-service [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                      [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-service>

lib/insights/diagram/components/icons/diagram-icon-service-task.component.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-service-task',
+    templateUrl: './diagram-icon-service-task.component.html'
+})
+export class DiagramIconServiceTaskComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x + 4, y: this.data.y + 4};
+        this.options.stroke = 'none' ;
+        this.options.fillColors = '#72a7d0' ;
+    }
+}

lib/insights/diagram/components/icons/diagram-icon-signal.component.html

@@ -0,0 +1,2 @@
+<raphael-icon-signal [position]="position" [stroke]="options.stroke" [strokeWidth]="options.strokeWidth"
+                   [fillColors]="options.fillColors" [fillOpacity]="options.fillOpacity"></raphael-icon-signal>

lib/insights/diagram/components/icons/diagram-icon-signal.component.ts

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ /* tslint:disable:component-selector  */
+
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    selector: 'diagram-icon-signal',
+    templateUrl: './diagram-icon-signal.component.html'
+})
+export class DiagramIconSignalComponent implements OnInit {
+    @Input()
+    data: any;
+
+    @Input()
+    fillColor: string;
+
+    @Output()
+    error = new EventEmitter();
+
+    position: any;
+
+    options: any = {stroke: '', fillColors: '', fillOpacity: '', strokeWidth: ''};
+
+    constructor(public elementRef: ElementRef) {}
+
+    ngOnInit() {
+        this.position = {x: this.data.x - 1, y: this.data.y - 1};
+
+        this.options.stroke = 'black';
+        this.options.fillColors = this.fillColor;
+        this.options.strokeWidth = 1;
+    }
+}