/**
         * Attach to a palette app entry angular-bootstrap-ui tooltip for showing info about the app and its parameters
         *
         * @param view palette app entry Joint JS view
         */
        function attachPaletteAppTooltip(view) {
            var node = view.model;

            // Create scope for the tooltip
            var scope = $rootScope.$new(true);
            // Pass the Joint JS model on to the tooltip scope
            scope.cell = node;
            // Template uses Object#keys function. Need to pass it on the scope to make it available to angular template compiler
            scope.keys = Object.keys;
            // Tooltip should be closed initially
            scope.tooltipIsOpen = false;

            if (node.attr('metadata')) {
                // Watch for tooltip opening/closing
                scope.$watch('tooltipIsOpen', function(newValue) {
                    if (newValue) {

                        // Tooltip is showing! Load properties and description data via promises asynchronously now

                        node.attr('metadata').get('description').then(function(description) {
                            scope.description = description;
                        }, function(error) {
                            if (error) {
                                $log.error(error);
                            }
                        });

                        node.attr('metadata').get('properties').then(function(properties) {
                            scope.properties = properties;
                        }, function(error) {
                            if (error) {
                                $log.error(error);
                            }
                        });
                    }
                });
            }

            // Disallow Core Flo tooltip
            if (angular.isFunction(view.showTooltip)) {
                view.showTooltip = function() {};
            }
            if (angular.isFunction(view.hideTooltip)) {
                view.hideTooltip = function() {};
            }

            // Scope is prepared. Attach the tooltip using specific HTML template
            attachBootstrapTemplateTooltip(view.el, scope, 'scripts/stream/views/palette-app-tooltip.html', 'bottom', 500, 'palette-app-tooltip');

            // All DOM modifications should be in place now. Let angular compile the DOM element to fuse scope and HTML
            $compile(view.el)(scope);

        }
			return $http.get('/parse', { params: {'text': definitionText}}).success(function(data) {
				if (angular.isFunction(setErrorFn)) {
					setErrorFn(null);
				}
				if (typeof data === 'string') {
					data = angular.fromJson(data);
				}
				// TODO handle error case, clear the graph
				$log.info('parse responded with data:\''+JSON.stringify(data)+'\'');
				if (angular.isFunction(updateGraphFn)) {
					updateGraphFn(data);
				}
			}).error(function(data, status, headers, config, statusText) { // jshint ignore:line
Esempio n. 3
0
export default function connect({
    mapStateToScope,
    mapDispatchToScope,
}, directiveDef) {
  invariant(isFunction(directiveDef) || isArray(directiveDef),
      'invalid definition of angular directive definition. Should be array or function');
  invariant(isFunction(mapStateToScope), 'should be function with store state as param');
  invariant(isFunction(mapDispatchToScope), 'should be function with store dispatch, state as param');

  const directiveFun = isFunction(directiveDef) ? directiveDef : directiveDef[directiveDef.length - 1];
  const directiveDependency = isArray(directiveDef) && directiveDef.length >= 2 ?
      directiveDef.slice(0, directiveDef.length - 1) : [];

  const wrappedDirectiveDependency = directiveDependency.concat('ngStore');

  const wrappedDirectiveFun = (...args) => {
    const ngStore = args[args.length - 1];
    const dirApi = directiveFun(...args);

    invariant(isFunction(dirApi.link), 'directive link must be defined as a function');

    function wrappedLink($scope, $element, $attrs, ...more) {
      const $nuScope = $scope;

      function mapState() {
        forEach(mapStateToScope(ngStore.getState), (val, key) => {
          $nuScope[key] = val;
        });
      }

      const unsubscribe = ngStore.subscribe(mapState);
      $nuScope.$on('$destroy', unsubscribe);
      mapState();

      forEach(mapDispatchToScope(ngStore.dispatch, ngStore.getState, $nuScope), (val, key) => {
        $nuScope[key] = val;
      });

      return dirApi.link($nuScope, $element, $attrs, ...more);
    }

    return extend({}, dirApi, {
      link: wrappedLink,
    });
  };

  const finalDirDef = wrappedDirectiveDependency.concat(wrappedDirectiveFun);

  return finalDirDef;
}
Esempio n. 4
0
 $scope.$apply(()=> {
     $scope.value = cm.getValue();
     let fn = $scope.onChange();
     if (angular.isFunction(fn)) {
         fn(cm);
     }
 });
Esempio n. 5
0
  const wrappedDirectiveFun = (...args) => {
    const ngStore = args[args.length - 1];
    const dirApi = directiveFun(...args);

    invariant(isFunction(dirApi.link), 'directive link must be defined as a function');

    function wrappedLink($scope, $element, $attrs, ...more) {
      const $nuScope = $scope;

      function mapState() {
        forEach(mapStateToScope(ngStore.getState), (val, key) => {
          $nuScope[key] = val;
        });
      }

      const unsubscribe = ngStore.subscribe(mapState);
      $nuScope.$on('$destroy', unsubscribe);
      mapState();

      forEach(mapDispatchToScope(ngStore.dispatch, ngStore.getState, $nuScope), (val, key) => {
        $nuScope[key] = val;
      });

      return dirApi.link($nuScope, $element, $attrs, ...more);
    }

    return extend({}, dirApi, {
      link: wrappedLink,
    });
  };
  function initializeEnforcer( enforcer, callbackOnInit ) {
    // If current session role is included in enforced roles, call signIn callback
    if ( callbackOnInit && includes( enforcer.roles, sessionService.getRole() ) ) {

      // Donor mode is a special case, we need to also check donorDetails for a registration-state
      if ( enforcer.mode === EnforcerModes.donor ) {
        orderService.getDonorDetails().subscribe( ( donorDetails ) => {
          if ( angular.isDefined( donorDetails['registration-state'] ) && donorDetails['registration-state'] === 'COMPLETED' ) {
            // User is REGISTERED and COMPLETED, Call signIn callback if present
            if ( angular.isFunction( enforcer[EnforcerCallbacks.signIn] ) ) enforcer[EnforcerCallbacks.signIn]();
          }
          else {
            // User is REGISTERED but not COMPLETED
            // Enforce current role
            sessionChanged( donorDetails );
          }
        }, () => {
          // getDonorDetails failed, assume registration-state is NEW and enforce the current role.
          sessionChanged();
        } );
      }
      else {
        // Not donor mode, call signIn callback if present
        if ( angular.isFunction( enforcer[EnforcerCallbacks.signIn] ) ) enforcer[EnforcerCallbacks.signIn]();
      }
    }
    else {
      // Enforce current role on the new enforcer
      sessionChanged();
    }
  }
        return function subscription(handler/*[, eventSelector or $scope][, eventSelector]*/){
            var eventSelector = angular.identity;
            var scope = $rootScope;

            if (arguments.length === 2){
                if (angular.isFunction(arguments[1].$new)) {
                    scope = arguments[1];
                } else {
                    eventSelector = arguments[1]
                }
            } else if (arguments.length > 2){
                scope = arguments[1];
                eventSelector = arguments[2];
            }

            // shorthand for subscriber to only receive events from a specific publisher instance
            if (angular.isObject(eventSelector)) {
                var requiredPublisher = eventSelector;
                eventSelector = function(publisher){
                    return publisher === requiredPublisher;
                }
            }

            return scope.$on('ngTable:' + eventName, function(event, params/*, ...args*/){
                // don't send events published by the internal NgTableParams created by ngTableController
                if (params.isNullInstance) return;

                var eventArgs = rest(arguments, 2);
                var fnArgs = [params].concat(eventArgs);
                if (eventSelector.apply(this, fnArgs)){
                    handler.apply(this, fnArgs);
                }
            });
        }
 /**
  * Resolve the template of a form step
  * @param  {FormStep} formStep The form step object
  * @return {Promise|String}    A promise containing the template
  */
 function resolveTemplate(formStep) {
     if (formStep.template) {
         // If function or array, use $injector to get template value
         return angular.isFunction(formStep.template) || angular.isArray(formStep.template) ?
             $injector.$invoke(formStep.template) :
             formStep.template;
     }
     // Use templateUrl
     const templateUrl =
         // If function or array, use $injector to get templateUrl value
         angular.isFunction(formStep.templateUrl) || angular.isArray(formStep.templateUrl) ?
         $injector.$invoke(formStep.templateUrl) :
         formStep.templateUrl;
     // Request templateUrl using $templateCache
     return $http.get(templateUrl, {cache: $templateCache});
 }
 $scope.onSelectItem = function (item) {
     $scope.closePopover();
     if (angular.isFunction($scope.onSelect)) {
         tryMarkUsed(item);
         $scope.onSelect({item: item});
     }
     $scope.search = '';
 };
Esempio n. 10
0
 /**
  * @param {string} key - key
  * @param {function} fn - function
 */
 function addChangeListener(key, fn) {
   if (angular.isFunction(fn)) {
     if (!changeListeners[key]) {
       changeListeners[key] = [];
     }
     changeListeners[key].push(fn);
   }
 }
 function getFilterFn(params) {
     var filterOptions = params.settings().filterOptions;
     if (angular.isFunction(filterOptions.filterFn)){
         return filterOptions.filterFn;
     } else {
         return $filter(filterOptions.filterFilterName || provider.filterFilterName);
     }
 }
 var inject = function(extensions) {
   // if result is an array or function we expect
   // an injectable service
   if (angular.isFunction(extensions) || angular.isArray(extensions)) {
     injector.instantiate(extensions, { $scope: scope });
   } else {
     throw new Error('Must call inject(array|fn)');
   }
 };
Esempio n. 13
0
					$.each(datasets, function (index, dataset) {
						var query = dataset.source,
							displayKey = dataset.displayKey || 'value',
							value = (angular.isFunction(displayKey) ? displayKey(fromModel) : fromModel[displayKey]) || '';

						if (found) {
							return false; // break
						}

						if (!value) {
							// Fakes a request just to use the same function logic
							search([]);
							return;
						}

						// Get suggestions by asynchronous request and updates the view
						if (angular.isFunction(query)) {
							query(value, search);
						} else {
							query.search(value, search);
						}
						return;

						function search(suggestions) {
							var exists = inArray(suggestions, fromModel);
							if (exists) {
								ngModel.$setViewValue(fromModel);
								found = true;
							} else {
								ngModel.$setViewValue(options.editable === false ? undefined : fromModel);
							}

							// At this point, digest could be running (local, prefetch) or could not be (remote)
							// As bloodhound object is inaccessible to know that, simulates an async to not conflict
							// with possible running digest
							if (found || index === datasets.length - 1) {
								setTimeout(function () {
									scope.$apply(function () {
										element.typeahead('val', value);
									});
								}, 0);
							}
						}
					});
Esempio n. 14
0
			}).error(function(data, status, headers, config, statusText) { // jshint ignore:line
				if (typeof data === 'string') {
					data = angular.fromJson(data);
				}
				if (angular.isFunction(setErrorFn)) {
					setErrorFn(data);
				}
				
				$log.info(JSON.stringify(data));
			});
Esempio n. 15
0
/**
 * The Util service is for thin, globally reusable, utility functions
 */
export default function UtilService($window) {
  'ngInject';
  var Util = {
    /**
     * Return a callback or noop function
     *
     * @param  {Function|*} cb - a 'potential' function
     * @return {Function}
     */
    safeCb(cb) {
      return (angular.isFunction(cb)) ? cb : angular.noop;
    },

    /**
     * Parse a given url with the use of an anchor element
     *
     * @param  {String} url - the url to parse
     * @return {Object}     - the parsed url, anchor element
     */
    urlParse(url) {
      var a = document.createElement('a');
      a.href = url;

      // Special treatment for IE, see http://stackoverflow.com/a/13405933 for details
      if (a.host === '') {
        a.href = a.href;
      }

      return a;
    },

    /**
     * Test whether or not a given url is same origin
     *
     * @param  {String}           url       - url to test
     * @param  {String|String[]}  [origins] - additional origins to test against
     * @return {Boolean}                    - true if url is same origin
     */
    isSameOrigin(url, origins) {
      url = Util.urlParse(url);
      origins = (origins && [].concat(origins)) || [];
      origins = origins.map(Util.urlParse);
      origins.push($window.location);
      origins = origins.filter(function(o) {
        return url.hostname === o.hostname &&
          url.port === o.port &&
          url.protocol === o.protocol;
      });
      return (origins.length >= 1);
    }
  };

  return Util;
}
 orderService.getDonorDetails().subscribe( ( donorDetails ) => {
   if ( angular.isDefined( donorDetails['registration-state'] ) && donorDetails['registration-state'] === 'COMPLETED' ) {
     // User is REGISTERED and COMPLETED, Call signIn callback if present
     if ( angular.isFunction( enforcer[EnforcerCallbacks.signIn] ) ) enforcer[EnforcerCallbacks.signIn]();
   }
   else {
     // User is REGISTERED but not COMPLETED
     // Enforce current role
     sessionChanged( donorDetails );
   }
 }, () => {
Esempio n. 17
0
	configure( page, settings ){
		var views,
			addView = this.addView.bind(this);

		this.reset();

		if ( settings ){
			this.settings.fitToPane = settings.fitToPane;
			this.settings.adjustSettings = settings.adjustSettings;

			this.page = page;
			this.zoom = page.getZoom( settings.zoom );
			this.normalizeY = settings.normalizeY;
			this.normalizeX = settings.normalizeX;

			this.settings.x = ComponentView.parseSettingsX( settings.x, this.settings.x );
			this.settings.y = ComponentView.parseSettingsY( settings.y, this.settings.y );

			// I want to compile everything but scale.
			if ( settings.x ){
				this.settings.x.scale = settings.x.scale;
			}else{
				this.settings.x.scale = null;
			}

			if ( settings.y ){
				this.settings.y.scale = settings.y.scale;
			}else{
				this.settings.y.scale = null;
			}
			
			views = settings.views;
			if ( !views ){
				views = {};
				views[ Chart.defaultView ] = {};
			}else if ( angular.isFunction(views) ){
				views = views();
			}
			
			angular.forEach( views, addView );

			if ( settings.onLoad ){
				settings.onLoad( this );
			}

			this.zoom.$on( 'update',this.rerender.bind(this) );

			this.message = null;
		}

		this.$trigger('configured');
	}
 /**
  * Attach angular-bootstrap-ui tooltip to error mareker shape to show error details
  *
  * @param view Joint JS view of the error marker
  */
 function attachErrorMarkerTooltip(view) {
     var node = view.model;
     // Create tooltip scope
     var scope = $rootScope.$new(true);
     // Pass the error messages to the tooltip scope
     scope.errors = function() {
         return node.attr('messages');
     };
     // Tooltip should be closed initially
     scope.tooltipIsOpen = false;
     // Disallow Core Flo tooltip
     if (angular.isFunction(view.showTooltip)) {
         view.showTooltip = function() {};
     }
     if (angular.isFunction(view.hideTooltip)) {
         view.hideTooltip = function() {};
     }
     // Attach the tooltip using created above scope and specific HTML template
     attachBootstrapTemplateTooltip(view.el, scope, 'scripts/stream/views/error-marker-tooltip.html', 'right', 100, 'red-tooltip');
     // All DOM modifications should be in place now. Let angular compile the DOM element to fuse scope and HTML
     $compile(view.el)(scope);
 }
Esempio n. 19
0
define(['main/router.config'], function() {
  'use strict';
  var angular = require('angular'),
    module = angular.module('main', ['ngRoute']);

  for (var i = 0; i < arguments.length; i++) {
    if (angular.isFunction(arguments[i])) {
      arguments[i](module);
    }
  }

  return module;
});
Esempio n. 20
0
        factory.on = function(eventName, callback) {
            if (!listeners[eventName]) {
                listeners[eventName] = [];
                $rootScope.$on(eventName, function(event, data) {
                    listeners[eventName].forEach(function(listener) {
                        listener(data);
                    });
                });

            }
            if (isFunction(callback)) {
                listeners[eventName].push(callback);
            }
        };
Esempio n. 21
0
  function() {
    'use strict';
    var angular = require('angular'),
      module = angular.module('tm', [
        'ngRoute',
        'ui.bootstrap',
        'tm.router.config'
      ]);

    for (var i = 0; i < arguments.length; i++) {
      if (angular.isFunction(arguments[i])) {
        arguments[i](module);
      }
    }

    return module;
  }
Esempio n. 22
0
        options => {
          sortable.options = angular.extend({}, defaults, options);

          if (sortable.options.active === false) {
            if (sortable.in_use) {
              sortable.unbind();
              sortable.in_use = false;
            }
            return;
          }

          if (angular.isFunction(sortable.options.construct)) {
            sortable.options.construct(ngModel.$modelValue);
          }

          element[0].classList.add('sortable');
          sortable.update();
        },
Esempio n. 23
0
      breadcrumbsAdd: function(crumb) {
        if (angular.isArray(crumb)) {
          return angular.forEach(crumb, this.breadcrumbsAdd);
        }

        if (angular.isFunction(crumb)) {
          var callback = crumb;
          crumb = {
            callback: callback
          };
        }

        crumb.label = crumb.label || '…';

        page.breadcrumbs.push(crumb);

        $rootScope.$broadcast('page.breadcrumbs.changed', page.breadcrumbs);
        return this;
      },
Esempio n. 24
0
  SwaggerEditor.on = function(eventName, callback) {
    if (!angular.isString(eventName)) {
      throw new TypeError('eventName must be string');
    }

    if (!angular.isFunction(callback)) {
      throw new TypeError('callback must be a function');
    }

    if (!hooks[eventName]) {
      throw new Error(eventName + ' is not a valid event name');
    }

    var isRegisteredCallback = hooks[eventName].some(function(cb) {
      return cb === callback;
    });

    if (!isRegisteredCallback) {
      hooks[eventName].push(callback);
    }
  };
    getAxis(){
        let axis = d3.svg.axis().scale(this.scale).orient(this.orientation);
        if(this.ticks) {
            axis.ticks(this.ticks)
        }

        if(this.tickValues) {
            axis.tickValues(this.tickValues);
        }

        if(this.tickSize) {
            let tickSize = this.tickSize.split(",");
            axis.innerTickSize(tickSize[0]);
            axis.outerTickSize(tickSize[1]);
        }


        if(this.tickFormat) {

            let format;
            //There are some special formats
            if(this.tickFormat === "%") {
                format = function(t) {
                    return t + "%"
                }
            } else {
                if(!angular.isFunction(this.tickFormat)){
                    format = d3.format(this.tickFormat);
                } else {
                    format = this.tickFormat;
                }
            }

            axis.tickFormat(format);
        }



        return axis;
    }
Esempio n. 26
0
    query: function(attrs,extra,callback) {
      var from = attrs.from.slice(attrs.from.indexOf(":")+1);
      var result = $q.defer()
      if(attrs.parentLabel){
        var tmp = utils.valueOnPath(attrs.parentObject,from,true)
        if(callback && angular.isFunction(callback)) callback(tmp)
        else result.resolve(tmp);
      }else{
        var where = attrs.where;
        for(var i = 0; i<attrs.params.length; i++) {
          where = where.replace(attrs.params[i].expression, attrs.params[i].replace("'" + attrs.params[i].value + "'"));
        }
        var query;
        if(attrs.use) {
          query = "use '" + attrs.use + "' as tmpTable; select * from tmpTable";
        } else {
          query = "select * from " + from;
        }
        if(where) query += " where " + where;
        $http.get("https://query.yahooapis.com/v1/public/yql?q="
            + encodeURIComponent(query)
            + "&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&format=json")
          .success(function(data){
            var d = data.query.results;
            if(attrs.use && from.indexOf(".")>=0) {
              d = utils.valueOnPath(data.query.results,from,true);
            }
            console.log("Data:",d);
            result.resolve(d);
          }).error(function(data){
          result.reject(data.error);
        });
      }
      return result.promise

    },
Esempio n. 27
0
				metamodelService.load().then(function(data) {
					buildPalette(data);
					if (metamodelService && angular.isFunction(metamodelService.subscribe)) {
						metamodelService.subscribe(_metamodelListener);
					}
				});
Esempio n. 28
0
		function init(element/*, attrs*/) {

			domContext = element;

			metamodelService = $injector.get($scope.metamodelServiceName);

			if ($scope.renderServiceName) {
				renderService = $injector.get($scope.renderServiceName);
			}

			// Create the paper for the palette using the specified element view
			palette = new joint.dia.Paper({
				el: $('#palette-paper', domContext),
				gridSize:1,
				model:paletteGraph,
				height: $(domContext.parentNode).height(),
				width: $(domContext.parentNode).width(),
				elementView: getPaletteView(renderService && angular.isFunction(renderService.getNodeView) ? renderService.getNodeView() : joint.dia.ElementView)
			});

			palette.on('cell:pointerup',
				function(cellview, evt) {
					$log.debug('pointerup');
					if (viewBeingDragged) {
						trigger('drop',{'dragged':viewBeingDragged,'evt':evt});
						viewBeingDragged = null;
					}
					clickedElement = null;
					$('#palette-floater').remove();
				});

			// Toggle the header open/closed on a click
			palette.on('cell:pointerclick',
				function(cellview/*,evt*/) {
					// TODO [design][palette] should the user need to click on the arrow rather than anywhere on the header?
					// Click position within the element would be: evt.offsetX, evt.offsetY
					var element = cellview.model;
					if (cellview.model.attributes.header) {
						// Toggle the header open/closed
						if (element.get('isOpen')) {
							rotateClosed(element);
						} else {
							rotateOpen(element);
						}
					}
					// TODO [palette] ensure other mouse handling events do nothing for headers
					// TODO [palette] move 'metadata' field to the right place (not inside attrs I think)
				});

			$(document).on('mouseup', handleMouseUp);

			if (metamodelService) {
				metamodelService.load().then(function(data) {
					buildPalette(data);
					if (metamodelService && angular.isFunction(metamodelService.subscribe)) {
						metamodelService.subscribe(_metamodelListener);
					}
				});
			} else {
				$log.error('No Metamodel service specified for palette!');
			}

			if ($scope.flo) {
				$scope.flo.paletteSize = $scope.flo.paletteSize || $(domContext.parentNode).width();
			}

		}
Esempio n. 29
0
		function dispose() {
			if (metamodelService && angular.isFunction(metamodelService.unsubscribe)) {
				metamodelService.unsubscribe(_metamodelListener);
			}
			$(document).off('mouseup', handleMouseUp);
		}
        /**
         * Attach angular-bootstrap-ui tooltip to a app shape on the main canvas
         *
         * @param view app shape Joint JS view
         */
        function attachCanvasAppTooltip(view) {
            var node = view.model;

            // Create scope for the tooltip
            var scope = $rootScope.$new(true);
            // Pass Joint JS model onto the tooltip scope
            scope.cell = node;
            // Template uses Object#keys function. Need to pass it on the scope to make it available to angular template compiler
            scope.keys = Object.keys;
            // Tooltip should be closed initially
            scope.tooltipIsOpen = false;

            // Track shape DnD event to hide the tooltip if DnD started
            view.on('cell:pointermove', function() {
                scope.tooltipIsOpen = false;
                // Occurs outside of angular digest cycle, so trigger angular listeners update
                scope.$digest();
            });

            scope.isCode = function(key) {
                if (scope.schema) {
                    // Key is a property name, properties are indexed by ids of a form <prefix><name>
                    var prefix = '';
                    var ids = scope.keys(scope.schema);
                    // Check if property is a property name, i.e. . char is a delimiter between prefixes
                    if (key.lastIndexOf('.') < 0 && ids.length) {
                        var propertyId = ids[0];
                        var idx = propertyId.lastIndexOf('.');
                        if (idx >= 0) {
                            prefix = propertyId.substring(0, idx + 1);
                        }
                    }
                    var id = prefix + key;
                    return scope.schema[id] && typeof scope.schema[id].contentType === 'string';
                }
            };

            scope.getPropertyValue = function(key) {
                var value = node.attr('props/' + key);
                if (value && scope.isCode(key)) {
                    value = metamodelService.decodeTextFromDSL(value);
                }
                return value;
            };

            // Track when tooltip is showing to load some data asynchronously when tooltip is showing
            scope.$watch('tooltipIsOpen', function(newValue) {
                if (newValue) {
                    node.attr('metadata').get('description').then(function(description) {
                        scope.description = description;
                    }, function(error) {
                        if (error) {
                            $log.error(error);
                        }
                    });
                    node.attr('metadata').get('properties').then(function(schema) {
                        scope.schema = schema;
                    });
                }
            });

            // Disallow Core Flo tooltip
            if (angular.isFunction(view.showTooltip)) {
                view.showTooltip = function() {};
            }
            if (angular.isFunction(view.hideTooltip)) {
                view.hideTooltip = function() {};
            }

            // Attach tooltips to ports. No need to compile against scope because parent element is being compiled
            // and no specific scope is attached to port tooltips
            view.$('[magnet]').each(function(index, magnet) {
                var port = magnet.getAttribute('port');
                if (port === 'input') {
                    attachBootstrapTextTooltip(magnet, null, 'Input Port', 'top', 500);
                } else if (port === 'output') {
                    attachBootstrapTextTooltip(magnet, null, 'Output Port', 'top', 500);
                } else if (port === 'tap') {
                    attachBootstrapTextTooltip(magnet, null, 'Tap Port', 'top', 500);
                }
            });

            // Scope is prepared. Attach the tooltip using specific HTML template
            // to shape group element (not the view group element) such that tooltip is not shown when hovering on ports
            attachBootstrapTemplateTooltip(view.$el.find('.shape')[0], scope, 'scripts/stream/views/canvas-app-tooltip.html', 'top', 500, 'canvas-app-tooltip');

            // All DOM modifications should be in place now. Let angular compile the DOM element to fuse scope and HTML
            $compile(view.el)(scope);

        }