Angular boostrap tooltips for JointJS shapes

- Tooltips for nodes
- Tooltips for JointJS shapes
- Tooltips for JointJS shapes
- Fixes #438

Author: jvalkeal

ui/src/app/streams/flo/decoration/decoration.component.html

@@ -0,0 +1,12 @@
+<svg:g class="rotatable" [tooltip]="markerTooltip" placement="right"
+       containerClass="{{kind + '-marker-tooltip'}}" container="body">
+  <svg:g class="scalable">
+    <svg:image/>
+  </svg:g>
+</svg:g>
+
+<template #markerTooltip>
+  <div>
+    <li *ngFor="let msg of getMessages()">{{msg}}</li>
+  </div>
+</template>

ui/src/app/streams/flo/decoration/decoration.component.scss

@@ -0,0 +1,7 @@
+.error-marker-tooltip .tooltip-inner {
+  background-color: red;
+  max-width: 400px;
+}
+.tooltip.error-marker-tooltip .tooltip-arrow {
+  border-right-color: red;
+}

ui/src/app/streams/flo/decoration/decoration.component.spec.ts

@@ -0,0 +1,56 @@
+import { Shapes } from 'spring-flo';
+import { dia } from 'jointjs';
+import { RenderService } from '../render.service';
+import { MockMetamodelService } from '../mocks/mock-metamodel.service';
+import { DecorationComponent } from './decoration.component';
+import { Constants } from 'spring-flo';
+
+import * as _joint from 'jointjs';
+const joint: any = _joint;
+
+function createMockView(cell: dia.Element): any {
+  return {
+    model: cell,
+  };
+}
+
+describe('DecorationComponent Tests.', () => {
+
+  const MOCK_METAMODEL_SERVICE = new MockMetamodelService();
+  const RENDER_SERVICE = new RenderService(MOCK_METAMODEL_SERVICE);
+
+  let graph: dia.Graph;
+  let component: DecorationComponent;
+  let parentNode: dia.Element;
+
+  beforeEach(() => {
+    graph = new joint.dia.Graph();
+    component = new DecorationComponent();
+    parentNode = Shapes.Factory.createNode({
+      metadata: MOCK_METAMODEL_SERVICE.data.get('source').get('http'),
+      renderer: RENDER_SERVICE,
+      graph: graph
+    });
+  });
+
+  it('No decoration view', () => {
+    expect(component.kind).toEqual('');
+    expect(component.getMessages()).toEqual([]);
+  });
+
+  it('Error Marker', () => {
+    const errorMarker = Shapes.Factory.createDecoration({
+      kind: Constants.ERROR_DECORATION_KIND,
+      messages: [
+        'm1', 'm2', 'm3'
+      ],
+      parent: parentNode,
+      renderer: RENDER_SERVICE,
+      graph: graph
+    });
+    component.view = createMockView(errorMarker);
+    expect(component.kind).toEqual(Constants.ERROR_DECORATION_KIND);
+    expect(component.getMessages()).toEqual(['m1', 'm2', 'm3']);
+  });
+
+});

ui/src/app/streams/flo/decoration/decoration.component.ts

@@ -0,0 +1,28 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { dia } from 'jointjs';
+import { BaseShapeComponent } from '../support/shape-component';
+
+/**
+ * Component for displaying application properties and capturing their values.
+ *
+ * @author Alex Boyko
+ * @author Andy Clement
+ */
+@Component({
+  selector: 'app-flo-decoration',
+  templateUrl: 'decoration.component.html',
+  styleUrls: [ 'decoration.component.scss' ],
+  encapsulation: ViewEncapsulation.None
+})
+export class DecorationComponent extends BaseShapeComponent {
+
+  getMessages(): Array<string> {
+    return this.view && Array.isArray(this.view.model.attr('messages')) ? this.view.model.attr('messages') : [];
+  }
+
+  get kind(): string {
+    return this.view ? this.view.model.attr('./kind') : '';
+  }
+
+}
+

ui/src/app/streams/flo/editor.service.ts

@@ -20,7 +20,7 @@ import { ApplicationType } from '../../shared/model/application-type';
 import { Flo, Constants } from 'spring-flo';
 import { dia } from 'jointjs';
 import { PropertiesDialogComponent } from './properties/properties-dialog.component';
-import { Utils } from './utils';
+import { Utils } from './support/utils';
 import * as _joint from 'jointjs';
 const joint: any = _joint;
 

ui/src/app/streams/flo/flo.scss

@@ -406,3 +406,7 @@ $spring-grey: $gray;
   background-color: transparent;
 }
 
+.tooltip {
+  position: absolute;
+}
+

ui/src/app/streams/flo/handle/handle.component.html

@@ -0,0 +1,5 @@
+<svg:g class="rotatable" [tooltip]="tooltipText" [placement]="placement" container="body">
+  <svg:g class="scalable">
+    <svg:image/>
+  </svg:g>
+</svg:g>

ui/src/app/streams/flo/handle/handle.component.spec.ts

@@ -0,0 +1,77 @@
+import { Shapes } from 'spring-flo';
+import { dia } from 'jointjs';
+import { RenderService } from '../render.service';
+import { MockMetamodelService } from '../mocks/mock-metamodel.service';
+import { HandleComponent } from './handle.component';
+import { Constants } from 'spring-flo';
+
+import * as _joint from 'jointjs';
+const joint: any = _joint;
+
+function createMockView(cell: dia.Element): any {
+  return {
+    model: cell,
+  };
+}
+
+describe('HandleComponent Tests.', () => {
+
+  const MOCK_METAMODEL_SERVICE = new MockMetamodelService();
+  const RENDER_SERVICE = new RenderService(MOCK_METAMODEL_SERVICE);
+
+  let graph: dia.Graph;
+  let component: HandleComponent;
+  let parentNode: dia.Element;
+
+  beforeEach(() => {
+    graph = new joint.dia.Graph();
+    component = new HandleComponent();
+    parentNode = Shapes.Factory.createNode({
+      metadata: MOCK_METAMODEL_SERVICE.data.get('source').get('http'),
+      renderer: RENDER_SERVICE,
+      graph: graph
+    });
+  });
+
+  it('No handle view', () => {
+    expect(component.placement).toEqual('top');
+    expect(component.tooltipText).toBeUndefined();
+  });
+
+  it('Remove Handle', () => {
+    const removeHandle = Shapes.Factory.createHandle({
+      kind: Constants.REMOVE_HANDLE_TYPE,
+      parent: parentNode,
+      renderer: RENDER_SERVICE,
+      graph: graph
+    });
+    component.view = createMockView(removeHandle);
+    expect(component.placement).toEqual('bottom');
+    expect(component.tooltipText).toEqual('Remove Element');
+  });
+
+  it('Edit Properties Handle', () => {
+    const propertiesHandle = Shapes.Factory.createHandle({
+      kind: Constants.PROPERTIES_HANDLE_TYPE,
+      parent: parentNode,
+      renderer: RENDER_SERVICE,
+      graph: graph
+    });
+    component.view = createMockView(propertiesHandle);
+    expect(component.placement).toEqual('bottom');
+    expect(component.tooltipText).toEqual('Edit Properties');
+  });
+
+  it('Random Handle', () => {
+    const randomHandle = Shapes.Factory.createHandle({
+      kind: 'random',
+      parent: parentNode,
+      renderer: RENDER_SERVICE,
+      graph: graph
+    });
+    component.view = createMockView(randomHandle);
+    expect(component.placement).toEqual('top');
+    expect(component.tooltipText).toBeUndefined();
+  });
+
+});

ui/src/app/streams/flo/handle/handle.component.ts

@@ -0,0 +1,42 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { Constants } from 'spring-flo';
+import { BaseShapeComponent } from '../support/shape-component';
+
+/**
+ * Component for displaying application properties and capturing their values.
+ *
+ * @author Alex Boyko
+ * @author Andy Clement
+ */
+@Component({
+  selector: 'app-flo-handle',
+  templateUrl: 'handle.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class HandleComponent extends BaseShapeComponent {
+
+  get tooltipText(): string {
+    if (this.view) {
+      switch (this.view.model.attr('./kind')) {
+        case Constants.REMOVE_HANDLE_TYPE:
+          return 'Remove Element';
+        case Constants.PROPERTIES_HANDLE_TYPE:
+          return 'Edit Properties';
+      }
+    }
+  }
+
+  get placement(): string {
+    if (this.view) {
+      switch (this.view.model.attr('./kind')) {
+        case Constants.REMOVE_HANDLE_TYPE:
+          return 'bottom';
+        case Constants.PROPERTIES_HANDLE_TYPE:
+          return 'bottom';
+      }
+    }
+    return 'top';
+  }
+
+}
+

ui/src/app/streams/flo/metamodel.service.ts

@@ -21,7 +21,7 @@ import { ApplicationType } from '../../shared/model/application-type';
 import { DetailedAppRegistration, ConfigurationMetadataProperty } from '../../shared/model/detailed-app-registration.model';
 import { convertGraphToText } from './graph-to-text';
 import { convertTextToGraph } from './text-to-graph';
-import { OTHER_GROUP_TYPE } from './shapes';
+import { OTHER_GROUP_TYPE } from './support/shapes';
 import { Observable} from 'rxjs/Observable';
 
 /**
@@ -59,7 +59,7 @@ class StreamAppMetadata implements Flo.ElementMetadata {
             const propertyMetadata: Flo.PropertyMetadata = {
               id: o.id,
               name: o.name,
-              description: o.description,
+              description: o.description || o.shortDescription,
               defaultValue: o.defaultValue,
               type: o.type
             };
@@ -95,7 +95,7 @@ class StreamAppMetadata implements Flo.ElementMetadata {
   }
 
   description(): Promise<string> {
-    return Promise.resolve(this._name);
+    return Promise.resolve('');
   }
 
   get(property: string): Promise<Flo.PropertyMetadata> {