angular.module("yds").directive("ydsGraph", ["Data",
    function (Data) {
        return {
            restrict: "E",
            scope: {
                projectId: "@",     // ID of the project to display
                viewType: "@",      // View type of the graph
                lang: "@",          // Lang of the visualised data

                extraParams: "=",   // Extra attributes to pass to the API, if needed
                baseUrl: "@",       // Base URL to send to API (optional)

                exporting: "@",     // Enable or disable the export of the plot
                elementH: "@",      // Set the height of the component

                enableRating: "@"   // Enable rating buttons for this component
            },
            templateUrl: ((typeof Drupal != "undefined") ? Drupal.settings.basePath + Drupal.settings.yds_project.modulePath + "/" : "") + "templates/graph.html",
            link: function (scope, element, attrs) {
                var graphContainer = _.first(angular.element(element[0].querySelector(".graph-container")));

                var elementId = "graph" + Data.createRandomId();
                graphContainer.id = elementId;

                var projectId = scope.projectId;
                var viewType = scope.viewType;
                var lang = scope.lang;

                var extraParams = scope.extraParams;
                var baseUrl = scope.baseUrl;

                var exporting = scope.exporting;
                var elementH = parseInt(scope.elementH);

                // Check if projectId is defined
                if (_.isUndefined(projectId) || projectId.trim() === "") {
                    scope.ydsAlert = "The YDS component is not properly configured. " +
                        "Please check the corresponding documentation section.";
                    return false;
                }

                // Check if view type is defined, otherwise set default value
                if (_.isUndefined(viewType) || viewType.trim() === "")
                    viewType = "default";

                // Check if lang is defined, otherwise set default value
                if (_.isUndefined(lang) || lang.trim() === "")
                    lang = "en";

                // Check if exporting is defined, otherwise set default value
                if (_.isUndefined(exporting) || (exporting !== "true" && exporting !== "false"))
                    exporting = "false";

                // Check if the element height is defined, otherwise set default value
                if (_.isUndefined(elementH) || _.isNaN(elementH))
                    elementH = 200;

                graphContainer.style.height = elementH + "px";

                // Create the graph
                var graph = Viva.Graph.graph();

                // Add graph data
                graph.addLink(1, 2);
                graph.addLink(2, 3);

                // Render the graph
                var renderer = Viva.Graph.View.renderer(graph, {
                    container: graphContainer
                });
                renderer.run();
            }
        };
    }
]);

@@ -2756,20 +2756,16 @@
    var g
-raph
  = Viva.
@@ -2835,28 +2835,225 @@
    g
-raph.addLink(1, 2
+.addNode(%22Node 1%22, %7B%0A                    icon: %22%5Cuf197%22%0A                %7D);%0A                g.addNode(%22Node 2%22, %7B%0A                    icon: %22%5Cuf080%22%0A                %7D);%0A                g.addLink(%22Node 1%22, %22Node 2%22
 );%0A
+%0A
     
@@ -3068,26 +3068,1133 @@
     
-graph.addLink(2, 3
+// Add node rendering functions%0A                var graphics = Viva.Graph.View.svgGraphics();%0A                var nodeSize = 24;%0A%0A                graphics.node(function (node) %7B%0A                    // The function is called every time renderer needs a ui to display node%0A                    var myNode = Viva.Graph.svg(%22g%22),%0A                        icon = Viva.Graph.svg(%22text%22)%0A                            .attr(%22font-family%22, %22FontAwesome%22)%0A                            .attr(%22font-size%22, %2224px%22)%0A                            .text(node.data.icon),%0A                        text = Viva.Graph.svg(%22text%22)%0A                            .attr(%22x%22, %2230px%22)%0A                            .attr(%22y%22, %22-4px%22)%0A                            .text(node.id);%0A%0A                    myNode.append(icon);%0A                    myNode.append(text);%0A%0A                    return myNode;%0A                %7D).placeNode(function (nodeUI, pos) %7B%0A                    nodeUI.attr('transform',%0A                        'translate(' +%0A                        (pos.x - nodeSize / 2) + ',' + (pos.y + nodeSize / 2) +%0A                        ')');%0A                %7D
 );%0A%0A
@@ -4286,20 +4286,16 @@
 nderer(g
-raph
 , %7B%0A    
@@ -4335,16 +4335,56 @@
 ontainer
+,%0A                    graphics: graphics
 %0A       

Add icons and text to the graph nodes