From eee13483ee5706a6dcf8052fdace8340236e9005 Mon Sep 17 00:00:00 2001
From: Jaden Diefenbaugh <blakcap@users.noreply.github.com>
Date: Wed, 8 Feb 2017 11:29:57 +0100
Subject: [PATCH] break directives into files, whitespace & misc fixes

---
 .../reports/app/directives/addReportItem.js   |  778 ++++++
 .../reports/app/directives/aliasExperiment.js |   83 +
 .../app/directives/buttonDeleteItem.js        |   34 +
 .../app/directives/buttonExportItem.js        |  293 +++
 .../reports/app/directives/buttonSettings.js  |   42 +
 .../static/reports/app/directives/item.js     |   66 +
 .../reports/app/directives/loadedContent.js   |   40 +
 .../reports/app/directives/lockReport.js      |   38 +
 .../reports/app/directives/myReportInfo.js    |   41 +
 .../reports/app/directives/publishReport.js   |   52 +
 .../app/directives/removeExperiment.js        |   38 +
 .../reports/app/directives/reportItemView.js  | 2121 -----------------
 .../reports/app/directives/saveReportItems.js |   89 +
 .../static/reports/app/directives/sortData.js |  234 ++
 .../reports/app/directives/tableDynamic.js    |   55 +
 .../reports/app/directives/tablePrecision.js  |   51 +
 .../reports/app/directives/theColumn.js       |  147 ++
 .../static/reports/test/report-spec.js        |    2 +-
 .../web/reports/templates/reports/report.html |   30 +-
 19 files changed, 2107 insertions(+), 2127 deletions(-)
 create mode 100644 beat/web/reports/static/reports/app/directives/addReportItem.js
 create mode 100644 beat/web/reports/static/reports/app/directives/aliasExperiment.js
 create mode 100644 beat/web/reports/static/reports/app/directives/buttonDeleteItem.js
 create mode 100644 beat/web/reports/static/reports/app/directives/buttonExportItem.js
 create mode 100644 beat/web/reports/static/reports/app/directives/buttonSettings.js
 create mode 100644 beat/web/reports/static/reports/app/directives/item.js
 create mode 100644 beat/web/reports/static/reports/app/directives/loadedContent.js
 create mode 100644 beat/web/reports/static/reports/app/directives/lockReport.js
 create mode 100644 beat/web/reports/static/reports/app/directives/myReportInfo.js
 create mode 100644 beat/web/reports/static/reports/app/directives/publishReport.js
 create mode 100644 beat/web/reports/static/reports/app/directives/removeExperiment.js
 delete mode 100644 beat/web/reports/static/reports/app/directives/reportItemView.js
 create mode 100644 beat/web/reports/static/reports/app/directives/saveReportItems.js
 create mode 100644 beat/web/reports/static/reports/app/directives/sortData.js
 create mode 100644 beat/web/reports/static/reports/app/directives/tableDynamic.js
 create mode 100644 beat/web/reports/static/reports/app/directives/tablePrecision.js
 create mode 100644 beat/web/reports/static/reports/app/directives/theColumn.js

diff --git a/beat/web/reports/static/reports/app/directives/addReportItem.js b/beat/web/reports/static/reports/app/directives/addReportItem.js
new file mode 100644
index 000000000..3255768f7
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/addReportItem.js
@@ -0,0 +1,778 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+//Directive for opening smart_selector list on "Add a report item" button click that displays options
+
+angular.module('reportApp').directive("addreportitem", function($compile){
+	return function(scope, element, attrs){
+		scope.$on("addSavedElement", function(event, id_content, type){
+			var num_tables_in_content = 0;
+			var num_figures_in_content = 0;
+			for(var i = 0; i < Object.keys(scope.report.content).length; i++){
+				if(Object.keys(scope.report.content)[i].indexOf("table_") == 0){
+					num_tables_in_content++;
+				}
+				else if(Object.keys(scope.report.content)[i].indexOf("chart_") == 0){
+					num_figures_in_content++;
+				}
+			}
+
+			if(type == "table"){
+				var table_id = id_content;
+				var table_details = undefined;
+
+				//take the one with more elements
+				if(Object.keys(scope.tables_details).length > num_tables_in_content){
+					table_details = scope.tables_details[id_content];
+				}
+				else{
+					table_details = scope.report.content[id_content];
+				}
+
+				var name_to_remove = "experiment";
+				for(var i = 0; i < table_details.length; i++){
+					if(table_details[i].name == "experiment"){
+						table_details.splice(i,1);
+						break;
+					}
+				}
+
+				scope.tables_details[table_id] = table_details;
+
+				var accessnumber = "no_number";
+				if(scope.report.number == scope.report_number){
+					accessnumber = "number";
+				}
+				var html_div_code = '<div class="panel panel-default" id="' + table_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + table_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-table"> Table</i></a></h4></div><div id="collapse-' + table_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div class="panel-body" table-dynamic monster=' + scope.num_report_items + " tableid=" + table_id + " reportstatus=" + scope.report.status + " accessnumber=" + accessnumber + " urlprefix=" + scope.url_prefix + '></div></div></div>';
+
+				angular.element(document.getElementById('space-for-report-items')).append($compile(html_div_code)(scope));
+				if(parseInt(table_id.split("_").pop(-1)) >= scope.max_num){
+					scope.max_num = parseInt(table_id.split("_").pop(-1));
+					scope.num_report_items = scope.max_num;
+				}
+
+				scope.num_report_items++;
+
+
+			}
+			else if(type == "chart"){
+
+				var content_detail = {};
+				var chart_id = id_content;
+
+				var plot_details = undefined;
+
+				//take the one with more elements
+				if(Object.keys(scope.plots_details).length > num_figures_in_content){
+					plot_details = scope.plots_details[chart_id];
+				}
+				else{
+					plot_details = scope.report.content[chart_id];
+				}
+
+
+
+				content_detail["name"] = plot_details.data.output[0];
+				//content_detail["description"] = scope.report.content[chart_id].data.plotter;
+				if(plot_details.data.plotter != undefined){
+					content_detail["selected_plotter"] = plot_details.data.plotter;
+				}
+				if(plot_details.selected_template != undefined){
+					content_detail["selected_template"] = plot_details.selected_template;
+				}
+				if(plot_details.data.merged != undefined){
+					content_detail["merged"] = plot_details.data.merged;
+				}
+				if(plot_details.merged != undefined){
+					content_detail["merged"] = plot_details.merged;
+				}
+
+				var html_div_code = '<div class="panel panel-default" id="' + chart_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + chart_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-area-chart"> ' + content_detail.name + '</i></a></h4></div><div id="collapse-' + chart_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div id="'+chart_id+'" class="panel-body chart {$ report.status $}"></div></div></div>';
+				generate_element(scope, "plot", html_div_code);
+				var element = document.getElementById(chart_id);
+				var label_element  = $(document.createElement('div'));
+				label_element.addClass('row');
+
+				var accessnumber = "no_number";
+				if(scope.report.number == scope.report_number){
+					accessnumber = "number";
+				}
+
+				var prepend_buttons = '<div class="col-sm-12"><div class="action-buttons report-buttons pull-left">';
+				var append_buttons = '</div></div>';
+
+				var a_export  = '<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle item_export ' + scope.report.status + ' ' + accessnumber + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-download fa-lg"></i> Export Figure <span class="caret"></span></button><ul class="dropdown-menu"><li id="PNG" buttonexportitem><a>PNG</a></li><li id="JPEG" buttonexportitem><a>JPEG</a></li><li id="PDF" buttonexportitem><a>PDF</a></li></ul></div>';
+				if(scope.report.status == "editable" && scope.report.number != scope.report_number) {
+					var a_element = '<button class="btn btn-danger btn-sm item_delete ' + scope.report.status + ' ' + accessnumber + '" buttondeleteitem><i class="fa fa-times fa-lg"></i> Delete</button>';
+					label_element.html(prepend_buttons + a_element + a_export + append_buttons);
+				}
+				else {
+					label_element.html(prepend_buttons + a_export + append_buttons);
+				}
+				;
+				$(element).find('.panel-body').append(label_element);
+				angular.element(document.getElementById('space-for-report-items')).append($compile(element)(scope));
+				//var html_dropdown  = "<chartdropdown id='selector_" + chart_id +"'></chartdropdown>";
+				//angular.element(document.getElementById(chart_id)).append($compile(html_dropdown)(scope));
+
+				_retrieve_chart(scope, content_detail, element);
+
+				if(parseInt(chart_id.split("_").pop(-1)) >= scope.max_num){
+					scope.max_num = parseInt(chart_id.split("_").pop(-1));
+					scope.num_report_items = scope.max_num;
+				}
+
+				scope.num_report_items++;
+
+			}
+
+		}
+		);
+
+		scope.$on("redrawGraphElement", function(event, id_content, type){
+			var content_detail = {};
+			var chart_id = id_content;
+			content_detail["name"] = scope.report.content[chart_id].data.output[0];
+			//content_detail["description"] = scope.report.content[chart_id].data.plotter;
+			if(scope.report.content[chart_id].data.plotter != undefined){
+				content_detail["selected_plotter"] = scope.report.content[chart_id].data.plotter;
+			}
+			if(scope.report.content[chart_id].data.parameter != undefined){
+				content_detail["selected_template"] = scope.report.content[chart_id].data.parameter;
+			}
+			if(scope.report.content[chart_id].data.merged != undefined){
+				content_detail["merged"] = scope.report.content[chart_id].data.merged;
+			}
+
+			var html_div_code = '<div class="panel panel-default" id="' + chart_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + chart_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-area-chart"> ' + content_detail.name + '</i></a></h4></div><div id="collapse-' + chart_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div id="'+chart_id+'" class="panel-body chart"></div></div></div>';
+			generate_element(scope, "plot", html_div_code);
+			var element = document.getElementById(chart_id);
+			var label_element  = $(document.createElement('div'));
+			label_element.addClass('row');
+
+			var accessnumber = "no_number";
+			if(scope.report.number == scope.report_number){
+				accessnumber = "number";
+			}
+
+			var prepend_buttons = '<div class="col-sm-12"><div class="action-buttons report-buttons pull-left">';
+			var append_buttons = '</div></div>';
+
+			var a_export  = '<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle item_export ' + scope.report.status + ' ' + accessnumber + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-download fa-lg"></i> Export Figure <span class="caret"></span></button><ul class="dropdown-menu"><li id="PNG" buttonexportitem><a>PNG</a></li><li id="JPEG" buttonexportitem><a>JPEG</a></li><li id="PDF" buttonexportitem><a>PDF</a></li></ul></div>';
+			if(scope.report.status == "editable" && scope.report.number != scope.report_number) {
+				var a_element = '<button class="btn btn-danger btn-sm item_delete ' + scope.report.status + ' ' + accessnumber + '" buttondeleteitem><i class="fa fa-times fa-lg"></i> Delete</button>';
+				label_element.html(prepend_buttons + a_element + a_export + append_buttons);
+			}
+			else {
+				label_element.html(prepend_buttons + a_export + append_buttons);
+			}
+			;
+			$(element).find('.panel-body').append(label_element);
+			angular.element(document.getElementById('space-for-report-items')).append($compile(element)(scope));
+			//var html_dropdown  = "<chartdropdown id='selector_" + chart_id +"'></chartdropdown>";
+			//angular.element(document.getElementById(chart_id)).html($compile(html_dropdown)(scope));
+
+			_retrieve_chart(scope, content_detail, element);
+
+		});
+
+		//add new report item
+		element.bind("click", function(){
+			var left = $('.add_item').offset().left - $('.add_item').width() + 400;
+			var top = $('.add_item').offset().top;
+			smart_selector.display(scope.item_content.content, left, top);
+
+			var allblocks = [];
+			for(var i = 0; i < scope.report_experiments_blocks_merged_blocks.length; i++){
+				allblocks.push(scope.report_experiments_blocks_merged_blocks[i]);
+			}
+			scope.report.common_blocks = arraysInCommon(allblocks);
+		});
+
+		//handles first selector selection (table/plot)
+		if(smart_selector != undefined){
+			smart_selector.onEntrySelected = function(item_selected){
+
+				var left = $('.add_item').offset().left - $('.add_item').width() + 400;
+				var top = $('.add_item').offset().top;
+
+				var next_items_for_selector = prepareContent(scope, smart_selector.entries[smart_selector.selected_entry].identifier);
+				smart_selector_detail.display(next_items_for_selector, left, top);
+			};
+		}
+
+		//handles next selector detail selection
+		if(smart_selector_detail != undefined){
+			smart_selector_detail.onEntrySelected = function(item_selected){
+				var left = $('.add_item').offset().left - $('.add_item').width() + 400;
+				var top = $('.add_item').offset().top;
+
+
+				var result_next_items = nextDetailContent(scope, smart_selector.entries[smart_selector.selected_entry].identifier, smart_selector_detail.entries[smart_selector_detail.selected_entry]);
+
+				if(!result_next_items[0]){
+					multiple_selector.display(result_next_items[1], left, top);
+				}
+			};
+		}
+
+		//handles first creation of table based on options
+		if(multiple_selector != undefined){
+			multiple_selector.onEntrySelected = function(item_selected, data){
+				for(var i = 0; i < multiple_selector.entries.length; i++){
+					if(multiple_selector.entries[i].name == item_selected){
+						multiple_selector.entries[i].selected = true;
+					}
+				}
+			};
+
+			multiple_selector.onEntryDeselected = function(item_selected, data){
+				for(var i = 0; i < multiple_selector.entries.length; i++){
+					if(multiple_selector.entries[i].name == item_selected){
+						multiple_selector.entries[i].selected = false;
+					}
+				}
+			};
+
+			multiple_selector.onClose = function(){
+				//check if at least one item is selected
+				var checkOneSelected = false;
+				angular.forEach(multiple_selector.entries, function(value, key){
+					if(value.selected)
+						checkOneSelected = true;
+				});
+
+				if(checkOneSelected){
+					var table_id = 'table' + '_' + scope.num_report_items;
+
+					scope.tables_details[table_id] = multiple_selector.entries;
+
+					var html_div_code = '<div class="panel panel-default" id="' + table_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + table_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-table"> Table</i></a></h4></div><div id="collapse-' + table_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div class="panel-body" table-dynamic monster=' + scope.num_report_items + " tableid=" + table_id + " reportstatus=" + scope.report.status + " urlprefix=" + scope.url_prefix + '></div></div></div>';
+
+					angular.element(document.getElementById('space-for-report-items')).append($compile(html_div_code)(scope));
+
+					scope.report.orderedcontent.push(table_id);
+					scope.num_report_items++;
+				}
+			};
+		}
+
+		//handles single table updates via settings option
+		if(multiple_selector_updater != undefined){
+			multiple_selector_updater.onEntrySelected = function(item_selected, data){
+				for(var i = 0; i < multiple_selector_updater.entries.length; i++){
+					if(multiple_selector_updater.entries[i].name == item_selected){
+						multiple_selector_updater.entries[i].selected = true;
+					}
+				}
+			};
+
+			multiple_selector_updater.onEntryDeselected = function(item_selected, data){
+				for(var i = 0; i < multiple_selector_updater.entries.length; i++){
+					if(multiple_selector_updater.entries[i].name == item_selected){
+						multiple_selector_updater.entries[i].selected = false;
+					}
+				}
+			};
+
+			multiple_selector_updater.onClose = function(){
+
+				//check if at least one item is selected
+				var checkOneSelected = false;
+				angular.forEach(multiple_selector_updater.entries, function(value, key){
+					if(value.selected)
+						checkOneSelected = true;
+				});
+
+				if(checkOneSelected){
+					var element = document.getElementById(multiple_selector_updater.current_table);
+
+					$(element).attr('id', null);
+					$compile(element)(scope);
+					$(element).attr('id', multiple_selector_updater.current_table);
+				}
+			};
+
+		};
+
+		//Prepare the content for selector initialization
+		function prepareContent(scope, content_identifier){
+			var next_content_items = [];
+
+			switch(content_identifier){
+				case 'table':
+					next_content_items =  scope.table_item_content.content;
+					break;
+				case 'plot':
+					angular.forEach(scope.report_experiments, function(value, key){
+						angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer){
+							if(value_analyzer.algorithm == scope.report.analyzer){
+								scope.report_experiments[key].analyzer_block = key_analyzer;
+							}
+						});
+
+						var plottable_result = [];
+						angular.forEach(value.results[scope.report_experiments[key].analyzer_block], function(value_result_item, key_result_item){
+							if(value_result_item.type.startsWith("plot/")){
+								plottable_result.push(key_result_item);
+							}
+
+						});
+
+						scope.report_experiments[key].plottable_blocks = plottable_result;
+
+					});
+
+					//Results block are the same for all experiments from same analyzer.
+					//So just grab information from one of them for smart_selector items
+					var single_experiment = scope.report.experiments[0];
+
+					//create smart_selector items
+					angular.forEach(scope.report_experiments[single_experiment].plottable_blocks, function(value_plottable, key_plottable){
+						var plot_type = scope.report_experiments[single_experiment].results[scope.report_experiments[single_experiment].analyzer_block][value_plottable].type;
+						var item_dict = {};
+						item_dict["identifier"] = value_plottable;
+						item_dict["name"] = value_plottable;
+						item_dict["description"] = plot_type;
+
+						next_content_items.push(item_dict);
+					});
+					break;
+			}
+
+			return next_content_items;
+		}
+
+		//Get the detailed content for next selector
+		function nextDetailContent(scope, content_identifier, sub_content){
+			var is_end = false;
+			var next_items = [];
+			var return_contents = [];
+			switch(content_identifier){
+				case 'table':
+					is_end = false;
+					angular.forEach(scope.report_experiments, function(value, key){
+						angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer){
+							if(value_analyzer.algorithm == scope.report.analyzer){
+								scope.report_experiments[key].analyzer_block = key_analyzer;
+							}
+						});
+
+						var table_result = [];
+						angular.forEach(value.results[scope.report_experiments[key].analyzer_block], function(value_result_item, key_result_item){
+							if(!(value_result_item.type.startsWith("plot/"))){
+								table_result.push(key_result_item);
+							}
+
+						});
+
+						scope.report_experiments[key].table_result_blocks = table_result;
+
+					});
+
+					//Results block are the same for all experiments from same analyzer.
+					//So just grab information from one of them for smart_selector items
+					var single_experiment = scope.report.experiments[0];
+
+					//create smart_selector items
+					angular.forEach(scope.report_experiments[single_experiment].table_result_blocks, function(value_table_result, key_table_result){
+
+						var table_item_data = scope.report_experiments[single_experiment].results[scope.report_experiments[single_experiment].analyzer_block][value_table_result];
+						var item_dict = {};
+						item_dict["identifier"] = value_table_result;
+						item_dict["name"] = value_table_result;
+						item_dict["description"] = table_item_data.type;
+						if(table_item_data.primary)
+							item_dict["selected"] = true;
+						else
+							item_dict["selected"] = false;
+						item_dict["data"] = table_item_data;
+
+						next_items.push(item_dict);
+					});
+
+					//adding execution time entry information for common blocks
+					angular.forEach(scope.report.common_blocks, function(value_table_result, key_table_result){
+						var item_dict = {};
+						item_dict["identifier"] = "execution_time." + value_table_result;
+						item_dict["name"] = "execution_time." + value_table_result;
+						item_dict["selected"] = false;
+						next_items.push(item_dict);
+
+					});
+
+					//adding total execution time entry information for experiment
+					var item_dict = {};
+					item_dict["identifier"] = "experiment.execution_time";
+					item_dict["name"] = "experiment.execution_time";
+					item_dict["selected"] = false;
+					next_items.push(item_dict);
+
+					//adding globals algorithms parameters
+					angular.forEach(scope.report_algorithm_parameters, function(value_algorithm_parameters, key_algorithm_parameters){
+						for(var i = 0; i < Object.keys(value_algorithm_parameters).length; i++){
+							var item_dict = {};
+							item_dict["identifier"] = "algorithm_parameter." + key_algorithm_parameters + "__" +Object.keys(value_algorithm_parameters)[i];
+							item_dict["name"] = "algorithm_parameter." + key_algorithm_parameters + "__" +Object.keys(value_algorithm_parameters)[i];
+							item_dict["selected"] = false;
+							next_items.push(item_dict);
+						}
+
+					});
+
+					break;
+				case 'plot':
+					is_end = true;
+					var chart_id = 'chart_' + sub_content.identifier + '_graph' + '_' + scope.num_report_items;
+					var html_div_code = '<div class="panel panel-default" id="' + chart_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + chart_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-area-chart"> ' + sub_content.name + '</i></a></h4></div><div id="collapse-' + chart_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div id="'+chart_id+'" class="panel-body chart {$ report.status $}"></div></div></div>';
+					generate_element(scope, content_identifier, html_div_code);
+					var element = document.getElementById(chart_id);
+					var label_element  = $(document.createElement('div'));
+					label_element.addClass('row');
+
+					var accessnumber = "no_number";
+					if(scope.report.number == scope.report_number){
+						accessnumber = "number";
+					}
+
+					var prepend_buttons = '<div class="col-sm-12"><div class="action-buttons report-buttons pull-left">';
+					var append_buttons = '</div></div>';
+
+					var a_export  = '<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle item_export ' + scope.report.status + ' ' + accessnumber + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-download fa-lg"></i> Export Figure <span class="caret"></span></button><ul class="dropdown-menu"><li id="PNG" buttonexportitem><a>PNG</a></li><li id="JPEG" buttonexportitem><a>JPEG</a></li><li id="PDF" buttonexportitem><a>PDF</a></li></ul></div>';
+					if(scope.report.status == "editable" && scope.report.number != scope.report_number) {
+						var a_element = '<button class="btn btn-danger btn-sm item_delete ' + scope.report.status + ' ' + accessnumber + '" buttondeleteitem><i class="fa fa-times fa-lg"></i> Delete</button>';
+						label_element.html(prepend_buttons + a_element + a_export + append_buttons);
+					}
+					else {
+						label_element.html(prepend_buttons + a_export + append_buttons);
+					}
+					$(element).find('.panel-body').append(label_element);
+
+					angular.element(document.getElementById('space-for-report-items')).append($compile(element)(scope));
+
+					_retrieve_chart(scope, sub_content, element);
+					scope.report.orderedcontent.push(chart_id);
+					break;
+			}
+
+			return_contents = [is_end, next_items];
+
+			return return_contents;
+
+		}
+
+		//Generate and compile DOM element
+		function generate_element(scope, content_identifier, html_div_code){
+			switch(content_identifier){
+				case 'table':
+					angular.element(document.getElementById('space-for-report-items')).append($compile(html_div_code)(scope));
+					scope.num_report_items++;
+					break;
+				case 'plot':
+					angular.element(document.getElementById('space-for-report-items')).append($compile(html_div_code)(scope));
+					scope.num_report_items++;
+					break;
+			}
+
+		}
+
+		//Retrieve chart from api and display on proper item
+		function _get_chart(scope, sub_content, content_type, chart_id){
+			var required_plotter = [];
+			var set_plotter = '';
+			if(sub_content.selected_plotter != undefined){
+				//required_plotter.push(sub_content.selected_plotter);
+				set_plotter = sub_content.selected_plotter;
+				var requested_dataformat = '';
+				//Get other plotters for required dataformat
+				for (var i = 0; i < scope.report.plotters.length; i++){
+					if(scope.report.plotters[i].name == sub_content.selected_plotter){
+						requested_dataformat = scope.report.plotters[i].dataformat;
+						break;
+					}
+				}
+
+				//Get default plotter for required dataformat
+				for (var i = 0; i < scope.report.defaultplotters.length; i++){
+					if(scope.report.defaultplotters[i].dataformat == requested_dataformat){
+						sub_content.defaultplotter = scope.report.defaultplotters[i];
+						break;
+					}
+				}
+
+				required_plotter.push(sub_content.defaultplotter.plotter);
+
+				//Get other plotters for required dataformat
+				for (var i = 0; i < scope.report.plotters.length; i++){
+					if(scope.report.plotters[i].dataformat == requested_dataformat && scope.report.plotters[i].name != sub_content.defaultplotter.plotter){
+						required_plotter.push(scope.report.plotters[i].name);
+					}
+				}
+			}
+			else{
+				//Get default plotter for required dataformat
+				for (var i = 0; i < scope.report.defaultplotters.length; i++){
+					if(scope.report.defaultplotters[i].dataformat == sub_content.description){
+						sub_content.defaultplotter = scope.report.defaultplotters[i];
+						break;
+					}
+				}
+
+				required_plotter.push(sub_content.defaultplotter.plotter);
+				set_plotter = sub_content.defaultplotter.plotter;
+
+				//Get other plotters for required dataformat
+				for (var i = 0; i < scope.report.plotters.length; i++){
+					if(scope.report.plotters[i].dataformat == sub_content.description && scope.report.plotters[i].name != sub_content.defaultplotter.plotter){
+						required_plotter.push(scope.report.plotters[i].name);
+					}
+				}
+			}
+
+			var plotterparameter = [];
+			//Get other plotterparameter
+			for (var i = 0; i < scope.report.plotterparameter.length; i++){
+				plotterparameter.push(scope.report.plotterparameter[i].name);
+			}
+
+			var chart_name = sub_content.name;
+
+			var legend_experiments = '';
+			var alias_experiments = [];
+			for(var i = 0; i < scope.report.experiments.length; i++){
+				if(i == 0)
+					legend_experiments = scope.report_experiments_alias[scope.report.experiments[i]];
+				else
+					legend_experiments = legend_experiments+ "&" +scope.report_experiments_alias[scope.report.experiments[i]];
+
+				alias_experiments.push(scope.report_experiments_alias[scope.report.experiments[i]]);
+			}
+
+			var request_data = {
+				experiment:   alias_experiments,
+				analyzer:     [scope.report.analyzer],
+				output:       [chart_name],
+				plotter:      set_plotter,
+				legend:       legend_experiments,
+				report_number:  scope.report.number,
+				//height:       300,
+				//width:        400,
+			};
+
+			base_url = scope.report.url_prefix;
+
+			var plot_detail = {};
+			plot_detail["required_plotter"] = required_plotter;
+			plot_detail["data"] =  {
+				analyzer:     [scope.report.analyzer],
+				output:       [chart_name],
+				plotter:      set_plotter,
+			};
+
+			if(sub_content.selected_template != undefined){// && sub_content.selected_template != "Default")
+				plot_detail["selected_template"] = sub_content.selected_template;
+				request_data.parameter = plot_detail["selected_template"];
+			}
+			else{
+				plot_detail["selected_template"] = sub_content.defaultplotter.parameter;
+				request_data.parameter = plot_detail["selected_template"];
+			}
+
+			if(sub_content.merged != undefined){// && sub_content.selected_template != "Default")
+				plot_detail["merged"] = sub_content.merged;
+				request_data.merged = plot_detail["merged"];
+			}
+			else{
+				plot_detail["merged"] = true;
+				request_data.merged = plot_detail["merged"];
+			}
+
+			beat.experiments.utils.getPlotData(base_url,
+				request_data, required_plotter, plotterparameter, content_type,
+				function(r_image_data, selected_content_type) {
+					download(r_image_data, chart_id + "." + content_type.toLowerCase(), selected_content_type);
+				}
+			);
+		}
+
+
+		//Retrieve chart from api and display on proper item
+		function _retrieve_chart(scope, sub_content, container){
+			var required_plotter = [];
+			var set_plotter = '';
+			if(sub_content.selected_plotter != undefined){
+				//required_plotter.push(sub_content.selected_plotter);
+				set_plotter = sub_content.selected_plotter;
+				var requested_dataformat = '';
+				//Get other plotters for required dataformat
+				for (var i = 0; i < scope.report.plotters.length; i++){
+					if(scope.report.plotters[i].name == sub_content.selected_plotter){
+						requested_dataformat = scope.report.plotters[i].dataformat;
+						break;
+					}
+				}
+
+				//Get default plotter for required dataformat
+				for (var i = 0; i < scope.report.defaultplotters.length; i++){
+					if(scope.report.defaultplotters[i].dataformat == requested_dataformat){
+						sub_content.defaultplotter = scope.report.defaultplotters[i];
+						break;
+					}
+				}
+
+				required_plotter.push(sub_content.defaultplotter.plotter);
+
+				//Get other plotters for required dataformat
+				for (var i = 0; i < scope.report.plotters.length; i++){
+					if(scope.report.plotters[i].dataformat == requested_dataformat && scope.report.plotters[i].name != sub_content.defaultplotter.plotter){
+						required_plotter.push(scope.report.plotters[i].name);
+					}
+				}
+			}
+			else{
+				//Get default plotter for required dataformat
+				for (var i = 0; i < scope.report.defaultplotters.length; i++){
+					if(scope.report.defaultplotters[i].dataformat == sub_content.description){
+						sub_content.defaultplotter = scope.report.defaultplotters[i];
+						break;
+					}
+				}
+
+				required_plotter.push(sub_content.defaultplotter.plotter);
+				set_plotter = sub_content.defaultplotter.plotter;
+
+				//Get other plotters for required dataformat
+				for (var i = 0; i < scope.report.plotters.length; i++){
+					if(scope.report.plotters[i].dataformat == sub_content.description && scope.report.plotters[i].name != sub_content.defaultplotter.plotter){
+						required_plotter.push(scope.report.plotters[i].name);
+					}
+				}
+			}
+
+			var plotterparameter = [];
+			//Get other plotterparameter
+			for (var i = 0; i < scope.report.plotterparameter.length; i++){
+				plotterparameter.push(scope.report.plotterparameter[i].name);
+			}
+
+			var chart_name = sub_content.name;
+
+			var legend_experiments = '';
+			var alias_experiments = [];
+
+			for(var i = 0; i < scope.report.experiments.length; i++){
+				if(i == 0)
+					legend_experiments = scope.report_experiments_alias[scope.report.experiments[i]];
+				else
+					legend_experiments = legend_experiments+ "&" +scope.report_experiments_alias[scope.report.experiments[i]];
+
+				if(Object.keys(scope.$parent.report_experiments_alias_from_content).length === 0)
+					alias_experiments.push(scope.report_experiments_alias[scope.report.experiments[i]]);
+				else
+					alias_experiments.push(scope.report_experiments_alias_from_content[scope.report.experiments[i]]);
+			}
+
+			var request_data = {
+				experiment:   alias_experiments,
+				analyzer:     [scope.report.analyzer],
+				output:       [chart_name],
+				plotter:      set_plotter,
+				legend:       legend_experiments,
+				report_number: scope.report.number,
+				//height:       300,
+				//width:        400,
+			};
+
+			base_url = scope.report.url_prefix;
+			//scope.plots_details[container.id];
+
+			var plot_detail = {};
+			plot_detail["required_plotter"] = required_plotter;
+			plot_detail["data"] =  {
+				analyzer:     [scope.report.analyzer],
+				output:       [chart_name],
+				plotter:      set_plotter,
+			};
+
+
+			if(sub_content.selected_template != undefined){// && sub_content.selected_template != "Default")
+				plot_detail["selected_template"] = sub_content.selected_template;
+				request_data.parameter = plot_detail["selected_template"];
+			}
+			else{
+				plot_detail["selected_template"] = sub_content.defaultplotter.parameter;
+				request_data.parameter = plot_detail["selected_template"];
+			}
+
+			if(sub_content.merged != undefined){// && sub_content.selected_template != "Default")
+				plot_detail["merged"] = sub_content.merged;
+				request_data.merged = plot_detail["merged"];
+			}
+			else{
+				plot_detail["merged"] = true;
+				request_data.merged = plot_detail["merged"];
+			}
+
+			scope.plots_details[container.id]= plot_detail;
+
+			if(scope.report.status == "editable" && scope.report.number != scope.report_number){
+				beat.experiments.utils.displayPlot(base_url, $(container).find('.panel-body')[0],
+					request_data, required_plotter, plotterparameter, false,
+
+					function(r_plotter, r_plotterparameter, r_merged) {
+						scope.plots_details[container.id]["data"]["plotter"] = r_plotter;
+						scope.plots_details[container.id]["selected_template"] = r_plotterparameter;
+						scope.plots_details[container.id]["merged"] = r_merged;
+					}
+				);
+			}
+			else{
+				beat.experiments.utils.displayPlot(base_url, $(container).find('.panel-body')[0],
+					request_data, [], [], false,
+
+					function(r_plotter, r_plotterparameter, r_merged) {
+					}
+				);
+			}
+		}
+
+		function arraysInCommon(arrays){
+			var i, common,
+				L= arrays.length, min= Infinity;
+			while(L){
+				if(arrays[--L].length<min){
+					min= arrays[L].length;
+					i= L;
+				}
+			}
+			common= arrays.splice(i, 1)[0];
+			return common.filter(function(itm, indx){
+				if(common.indexOf(itm)== indx){
+					return arrays.every(function(arr){
+						return arr.indexOf(itm)!= -1;
+					});
+				}
+			});
+		}
+
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/aliasExperiment.js b/beat/web/reports/static/reports/app/directives/aliasExperiment.js
new file mode 100644
index 000000000..7254b4dbd
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/aliasExperiment.js
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to handle table settings click
+angular.module('reportApp').directive("aliasexperiment", function($compile){
+	return {
+		link:function(scope, element, attrs){
+			var alias_name = scope.$parent.$parent.$parent.$parent.report_experiments_alias[scope.name];
+			createAlias(scope.name, alias_name);
+
+			element.bind("click", function(){
+				var input_element = document.getElementById("input_"+scope.name);
+				var icon_element = document.getElementById("icon_"+scope.name);
+				var button_element = document.getElementById("button_alias_"+scope.name);
+				if(! $(input_element).hasClass("input-disabled")){
+					if ($(input_element).val()){
+						$(input_element).addClass("input-disabled");
+						$(input_element).attr("disabled", true);
+						$(icon_element).removeClass("fa-unlock");
+						$(icon_element).addClass("fa-lock");
+						$(button_element).addClass("setalias");
+						var experiment_name = attrs.id.split("button_alias_")[1];
+						var alias_name = $(input_element).val();
+						$(input_element).val(alias_name);
+						createAlias(experiment_name, alias_name);
+					}
+					else{
+						alert("Alias for experiment" + scope.name + " can't be empty!");
+					}
+				}
+				else{
+					$(input_element).removeClass("input-disabled");
+					$(input_element).attr("disabled", false);
+					$(icon_element).removeClass("fa-lock");
+					$(icon_element).addClass("fa-unlock");
+					$(button_element).removeClass("setalias");
+
+				}
+			});
+
+			function createAlias(experiment_name, alias_name){
+				scope.report_experiments_alias[experiment_name] = alias_name;
+				scope.$parent.$parent.$parent.$parent.report_experiments_alias[experiment_name] = alias_name;
+
+				if(!scope.$$phase){
+					//$digest or $apply
+					var parent_scope = scope.$parent.$parent.$parent.$parent;
+					var table_details = parent_scope.tables_details;
+
+					for(var i = 0; i < parent_scope.report.orderedcontent.length; i++){
+						var element = document.getElementById(parent_scope.report.orderedcontent[i]);
+
+						$(element).remove();
+
+						var id_content = parent_scope.report.orderedcontent[i];
+						var type = id_content.split("_")[0];
+						parent_scope.$parent.$broadcast("addSavedElement", id_content, type);
+					}
+				}
+			}
+		}
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/buttonDeleteItem.js b/beat/web/reports/static/reports/app/directives/buttonDeleteItem.js
new file mode 100644
index 000000000..04412d83f
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/buttonDeleteItem.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to handle table settings click
+angular.module('reportApp').directive("buttondeleteitem", function(){
+	return {
+		link:function(scope, element, attrs){
+			element.bind("click", function(){
+				var elementToRemove = element.context.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
+				beat.ui.report.remove_item('report_remove_item', elementToRemove, scope);
+			});
+		}
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/buttonExportItem.js b/beat/web/reports/static/reports/app/directives/buttonExportItem.js
new file mode 100644
index 000000000..97f6abbf3
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/buttonExportItem.js
@@ -0,0 +1,293 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to export graph/tables on click
+angular.module('reportApp').directive("buttonexportitem", function(){
+	return {
+		link:function(scope, element, attrs){
+			element.bind("click", function(){
+				var the_element = element.context.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
+				if(the_element.id.indexOf("chart_") == 0){
+					var content_detail = {};
+					var chart_id = the_element.id;
+
+					content_detail["name"] = scope.plots_details[chart_id].data.output[0];
+
+					if(scope.plots_details[chart_id].data.plotter != undefined){
+						content_detail["selected_plotter"] = scope.plots_details[chart_id].data.plotter;
+					}
+					if(scope.plots_details[chart_id].data.parameter != undefined){
+						content_detail["selected_template"] = scope.plots_details[chart_id].data.parameter;
+					}
+					if(scope.plots_details[chart_id].data.merged != undefined){
+						content_detail["merged"] = scope.plots_details[chart_id].data.merged;
+					}
+
+					var accessnumber = "no_number";
+					if(scope.report.number == scope.report_number){
+						accessnumber = "number";
+					}
+					_get_chart(scope, content_detail, element[0].id, chart_id);
+				}
+				else if(the_element.id.indexOf("table_") == 0){
+					var separator = ",";
+					var csv_text = export_table_as_csv(scope, the_element.id, separator);
+					var output_filename = the_element.id + ".csv";
+					download(csv_text, output_filename, "text/plain");
+				}
+			});
+		}
+	};
+
+	function export_table_as_csv(scope, table_id, separator){
+		var report_experiments = scope.$parent.report_experiments;
+		var report_experiments_alias = scope.$parent.report_experiments_alias;
+		var floating_point_precision = scope.$parent.floating_point_precision;
+		var report = scope.report;
+		var final_table = [];
+		var table_headers = [];
+		angular.forEach(scope.tables_details[table_id], function(table_value, table_key){
+			if(table_value.selected){
+				table_headers.push(table_value.name);
+			}
+		});
+
+		final_table.push(table_headers);
+
+		angular.forEach(report_experiments, function(experiment_value, experiment_key){
+			var table_items = [];
+
+			angular.forEach(table_headers, function(table_value, table_key){
+				var experiment_name = experiment_key;
+				var analyzer_block = report_experiments[experiment_name].analyzer_block;
+				var report_algorithm_parameters_experiment = scope.$parent.report_algorithm_parameters_experiment;
+
+				if(table_value != "experiment"){
+					if(analyzer_block == undefined){
+						angular.forEach(report_experiments, function(value, key){
+							angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer){
+								if(value_analyzer.algorithm == report.analyzer && (key_analyzer in report_experiments[experiment_name].declaration.analyzers)){
+									report_experiments[experiment_name].analyzer_block = key_analyzer;
+									analyzer_block = report_experiments[experiment_name].analyzer_block;
+								}
+							});
+						});
+					}
+
+					if(table_value.indexOf("execution_time.") == 0){
+						//execution time information
+						var block_name = table_value.split("execution_time.")[1].split("[s]")[0];
+						if(Object.keys(report_experiments[experiment_name].execution_info).length === 0){
+							table_items.push("-");
+						}
+						else{
+							if(report_experiments[experiment_name].execution_info[block_name] == undefined){
+								table_items.push("-");
+							}
+							else{
+								table_items.push((report_experiments[experiment_name].execution_info[block_name].linear_execution_time).toFixed(floating_point_precision.selected));
+							}
+						}
+					}
+					else if(table_value.indexOf("experiment.") == 0){
+						//total execution time information
+						var block_name = table_value.split("execution_time.")[1];
+						var total_time = 0;
+						if(Object.keys(report_experiments[experiment_name].execution_info).length === 0){
+							total_time = "-";
+						}
+						else{
+							angular.forEach(report_experiments[experiment_name].execution_info, function(value, key){
+								total_time += value.linear_execution_time;
+							});
+						}
+
+						table_items.push(total_time.toFixed(floating_point_precision.selected));
+					}
+					else if(table_value.indexOf("algorithm_parameter.") == 0){
+						//total execution time information
+						var block_name = table_value.split("algorithm_parameter.")[1];
+						var algorithm_name = block_name.split("__")[0];
+						var parameter_name = block_name.split("__")[1];
+						if(report_algorithm_parameters_experiment[experiment_name][algorithm_name] != undefined){
+							var value = "";
+							for(var i = 0; i < report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name].length; i++){
+								if(i > 0 && i < report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name].length -1 ){
+									value += ",";
+								}
+								value = report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name][i];
+							}
+
+							table_items.push(value);
+						}
+						else{
+							table_items.push("-");
+						}
+					}
+					else{
+						//results information
+						table_items.push((report_experiments[experiment_name].results[analyzer_block][table_value].value).toFixed(floating_point_precision.selected));
+					}
+				}
+				else{
+					var experiment_alias = report_experiments_alias[experiment_name];
+					table_items.push(experiment_alias);
+				}
+
+			});
+
+			final_table.push(table_items);
+
+		});
+
+		var csv_text = "";
+		for(var i = 0; i < final_table.length; i++){
+			if(i != 0){
+				csv_text += "\n";
+			}
+
+			for(var j = 0; j < final_table[i].length; j++){
+				if( j != 0){
+					csv_text += separator;
+				}
+				csv_text += final_table[i][j];
+			}
+		}
+
+		var pre_base64_text = "data:text/plain;base64,";
+		var base_64_csv_text = pre_base64_text + Base64.encode(csv_text);
+		return base_64_csv_text;
+	}
+
+	//Retrieve chart from api and display on proper item
+	function _get_chart(scope, sub_content, content_type, chart_id){
+		var required_plotter = [];
+		var set_plotter = '';
+		if(sub_content.selected_plotter != undefined){
+			//required_plotter.push(sub_content.selected_plotter);
+			set_plotter = sub_content.selected_plotter;
+			var requested_dataformat = '';
+			//Get other plotters for required dataformat
+			for (var i = 0; i < scope.report.plotters.length; i++){
+				if(scope.report.plotters[i].name == sub_content.selected_plotter){
+					requested_dataformat = scope.report.plotters[i].dataformat;
+					break;
+				}
+			}
+
+			//Get default plotter for required dataformat
+			for (var i = 0; i < scope.report.defaultplotters.length; i++){
+				if(scope.report.defaultplotters[i].dataformat == requested_dataformat){
+					sub_content.defaultplotter = scope.report.defaultplotters[i];
+					break;
+				}
+			}
+
+			required_plotter.push(sub_content.defaultplotter.plotter);
+
+			//Get other plotters for required dataformat
+			for (var i = 0; i < scope.report.plotters.length; i++){
+				if(scope.report.plotters[i].dataformat == requested_dataformat && scope.report.plotters[i].name != sub_content.defaultplotter.plotter){
+					required_plotter.push(scope.report.plotters[i].name);
+				}
+			}
+		}
+		else{
+			//Get default plotter for required dataformat
+			for (var i = 0; i < scope.report.defaultplotters.length; i++){
+				if(scope.report.defaultplotters[i].dataformat == sub_content.description){
+					sub_content.defaultplotter = scope.report.defaultplotters[i];
+					break;
+				}
+			}
+
+			required_plotter.push(sub_content.defaultplotter.plotter);
+			set_plotter = sub_content.defaultplotter.plotter;
+
+			//Get other plotters for required dataformat
+			for (var i = 0; i < scope.report.plotters.length; i++){
+				if(scope.report.plotters[i].dataformat == sub_content.description && scope.report.plotters[i].name != sub_content.defaultplotter.plotter){
+					required_plotter.push(scope.report.plotters[i].name);
+				}
+			}
+		}
+
+		var plotterparameter = [];
+		//Get other plotterparameter
+		for (var i = 0; i < scope.report.plotterparameter.length; i++){
+			plotterparameter.push(scope.report.plotterparameter[i].name);
+		}
+
+		var chart_name = sub_content.name;
+
+		var legend_experiments = '';
+		for(var i = 0; i < scope.report.experiments.length; i++){
+			if(i == 0)
+				legend_experiments = scope.report_experiments_alias[scope.report.experiments[i]];
+			else
+				legend_experiments = legend_experiments+ "&" +scope.report_experiments_alias[scope.report.experiments[i]];
+		}
+
+		var request_data = {
+			experiment:   scope.report.experiments,
+			analyzer:     [scope.report.analyzer],
+			output:       [chart_name],
+			plotter:      set_plotter,
+			legend:       legend_experiments,
+			//height:       300,
+			//width:        400,
+		};
+
+		base_url = scope.report.url_prefix;
+
+		var plot_detail = {};
+		plot_detail["required_plotter"] = required_plotter;
+		plot_detail["data"] = request_data;
+		if(sub_content.selected_template != undefined){// && sub_content.selected_template != "Default")
+			plot_detail["selected_template"] = sub_content.selected_template;
+			request_data.parameter = plot_detail["selected_template"];
+		}
+		else{
+			plot_detail["selected_template"] = sub_content.defaultplotter.parameter;
+			request_data.parameter = plot_detail["selected_template"];
+		}
+
+		if(sub_content.merged != undefined){// && sub_content.selected_template != "Default")
+			plot_detail["merged"] = sub_content.merged;
+			request_data.merged = plot_detail["merged"];
+		}
+		else{
+			plot_detail["merged"] = true;
+			request_data.merged = plot_detail["merged"];
+		}
+
+		beat.experiments.utils.getPlotData(base_url,
+			request_data, required_plotter, plotterparameter, content_type,
+			function(r_image_data, selected_content_type) {
+				download(r_image_data, chart_id + "." + content_type.toLowerCase(), selected_content_type);
+			}
+		);
+	}
+
+
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/buttonSettings.js b/beat/web/reports/static/reports/app/directives/buttonSettings.js
new file mode 100644
index 000000000..ab33d446f
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/buttonSettings.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to handle table settings click
+angular.module('reportApp').directive("buttonsettings", function(){
+	return {
+		link:function(scope, element, attrs){
+			element.bind("click", function(){
+				var name_to_remove = "experiment";
+				var tables_details = scope.$parent.tables_details[scope.dattrs.tableid];
+				for(var i = 0; i < tables_details.length; i++){
+					if(tables_details[i].name == "experiment"){
+						tables_details.splice(i,1);
+						break;
+					}
+				}
+				multiple_selector_updater.current_table = scope.dattrs.tableid;
+				multiple_selector_updater.display(tables_details);
+			});
+		}
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/item.js b/beat/web/reports/static/reports/app/directives/item.js
new file mode 100644
index 000000000..ea6c8a7b6
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/item.js
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Dynamic tables items
+angular.module('reportApp').directive('item', function ($compile) {
+	function createTDElement(column) {
+		var table = angular.element('<table><tr><td class="tableitemspace" thecolumn="' + column + '"></td></tr></table>');
+		return table.find('td');
+	}
+
+	function render(element, scope) {
+		var column, html, i;
+		var columns = scope.$parent.tables_details[scope.$parent.dattrs.tableid];
+
+		for (i = 0; i < columns.length ; i++) {
+			if(i == 0 && columns.length > 0){
+				html = $compile(createTDElement("experiment"))(scope);
+
+			}
+			column = columns[i];
+			if (column.selected) {
+
+				html = $compile(createTDElement(column.name))(scope);
+				element.append(html);
+			}
+		}
+
+
+	}
+
+	return {
+		//   restrict: 'A',
+		scope: {
+			exp_name: "=",
+			item: "=",
+			columns: "="
+		},
+		compile: function () {
+			return function (scope, element) {
+				render(element, scope);
+			};
+
+		}
+	};
+
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/loadedContent.js b/beat/web/reports/static/reports/app/directives/loadedContent.js
new file mode 100644
index 000000000..fa47b3d85
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/loadedContent.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+*/
+
+//Directive that returns an element which adds buttons on click which adds items
+angular.module('reportApp').directive('loadedcontent', function(){
+    //return {
+    //    link: function (scope, elem, attrs, ctrl) {
+    //        angular.element(document).ready(function() {
+    //            console.info(scope.report.content);
+    //
+    //            });
+    //        //$(window).load(function() {
+    //        //
+    //        //    console.info(scope.report.content);
+    //        //
+    //        //    });
+    //    }
+    //}
+});
+
+
diff --git a/beat/web/reports/static/reports/app/directives/lockReport.js b/beat/web/reports/static/reports/app/directives/lockReport.js
new file mode 100644
index 000000000..31e0f9e67
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/lockReport.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive for opening smart_selector list on "Add a report item" button click that displays options
+angular.module('reportApp').directive("lockreport", function($compile){
+	return function(scope, element, attrs){
+		//add new report item
+		element.bind("click", function(){
+			lockReport();
+		});
+
+
+		function lockReport(){
+			beat.ui.report.lock_report('report_lock', scope);
+		}
+	};
+});
+
+
diff --git a/beat/web/reports/static/reports/app/directives/myReportInfo.js b/beat/web/reports/static/reports/app/directives/myReportInfo.js
new file mode 100644
index 000000000..38e96d2fd
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/myReportInfo.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to generate the dynamic table loading partials
+angular.module('reportApp').directive("myreportinfo", function(){
+	return {
+		restrict: 'E',
+		scope: true,
+		replace: true,
+		    //templateUrl: "/reports/partials/reportTable/",
+		    templateUrl: function(scope, elem, attrs){
+			var prefix = elem['urlprefix'];
+			        var the_url = prefix + "/reports/partials/reportInfo/";
+			return the_url;
+		},
+		link: function(scope, elem, attrs){
+		},
+		controller: ['$scope', function ($scope) {
+		}],
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/publishReport.js b/beat/web/reports/static/reports/app/directives/publishReport.js
new file mode 100644
index 000000000..4d03afae5
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/publishReport.js
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive for opening smart_selector list on "Add a report item" button click that displays options
+angular.module('reportApp').directive("publishreport", function($compile){
+	return function(scope, element, attrs){
+		//add new report item
+		element.bind("click", function(){
+			publishReport();
+		});
+
+
+		function publishReport(){
+			scope.reportFactory.publishReportAlgorithms(scope.user, scope.report_id, scope.url_prefix)
+			.success(function (reportData){
+				beat.ui.report.publish_report('report_publish', scope, reportData);
+			})
+			.error(function (error){
+				scope.status = 'Unable to publish report data: ' + error;
+				$(".explanation_text").hide();
+				$("#report_publish .warnings").hide();
+				$("#report_publish .errors").show();
+				if(error.detail != undefined)
+					scope.status = 'Unable to publish report data: ' + error.detail;
+				$("#report_publish .errors .errorslist").append(scope.status);
+				$("#button-report_publish-cancel").hide();
+			});
+
+
+		}
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/removeExperiment.js b/beat/web/reports/static/reports/app/directives/removeExperiment.js
new file mode 100644
index 000000000..b6a55a0c8
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/removeExperiment.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive for opening smart_selector list on "Add a report item" button click that displays options
+angular.module('reportApp').directive("removeexperiment", function($compile){
+	return function(scope, element, attrs){
+		//add new report item
+		element.bind("click", function(){
+			removeExperiment(attrs.id);
+		});
+
+
+		function removeExperiment(experiment_name){
+			beat.ui.report.remove_experiment('report_remove_experiment', experiment_name, scope);
+		}
+	};
+});
+
+
diff --git a/beat/web/reports/static/reports/app/directives/reportItemView.js b/beat/web/reports/static/reports/app/directives/reportItemView.js
deleted file mode 100644
index 23420bd10..000000000
--- a/beat/web/reports/static/reports/app/directives/reportItemView.js
+++ /dev/null
@@ -1,2121 +0,0 @@
-/*
- * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
- * Contact: beat.support@idiap.ch
- * 
- * This file is part of the beat.web module of the BEAT platform.
- * 
- * Commercial License Usage
- * Licensees holding valid commercial BEAT licenses may use this file in
- * accordance with the terms contained in a written agreement between you
- * and Idiap. For further information contact tto@idiap.ch
- * 
- * Alternatively, this file may be used under the terms of the GNU Affero
- * Public License version 3 as published by the Free Software and appearing
- * in the file LICENSE.AGPL included in the packaging of this file.
- * The BEAT platform is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
- * or FITNESS FOR A PARTICULAR PURPOSE.
- * 
- * You should have received a copy of the GNU Affero Public License along
- * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
-*/
-//Directive that returns an element which adds buttons on click which adds items
-var app = angular.module('reportApp');
-
-app.directive('loadedcontent', function()
-{
-    //return {
-    //    link: function (scope, elem, attrs, ctrl) {
-    //        angular.element(document).ready(function() {
-    //            console.info(scope.report.content);
-    //
-    //            });
-    //        //$(window).load(function() {
-    //        //
-    //        //    console.info(scope.report.content);
-    //        //
-    //        //    });
-    //    }
-    //}
-});
-
-//Directive for opening smart_selector list on "Add a report item" button click that displays options
-app.directive("removeexperiment", function($compile)
-{
-	return function(scope, element, attrs)
-    {
-        //add new report item
-		element.bind("click", function()
-        {
-            removeExperiment(attrs.id);
-		});
-
-
-        function removeExperiment(experiment_name)
-        {
-             beat.ui.report.remove_experiment('report_remove_experiment', experiment_name, scope);
-        }
-    }
-});
-
-//Directive for opening smart_selector list on "Add a report item" button click that displays options
-app.directive("savereportitems", function($compile)
-{
-	return function(scope, element, attrs)
-    {
-        //add new report item
-		element.bind("click", function()
-        {
-            //var savecontent = [];
-            var savecontent = {};
-            if(scope.plots_details != undefined)
-            {
-                angular.forEach(scope.plots_details, function(value, key)
-                {
-                    //savecontent.push(key, value);
-                    savecontent[key] = value;
-                });
-            }
-            if(scope.tables_details != undefined)
-            {
-                angular.forEach(scope.tables_details, function(value, key)
-                {
-                    savecontent[key] = value;
-                    //savecontent.push(key, value);
-                });
-
-                if(scope.floating_point_precision.selected != undefined)
-                {
-                    savecontent["floating_point_precision"] = scope.floating_point_precision.selected;
-                }
-            }
-            if(scope.report_experiments_alias != undefined)
-            {
-                var alias_experiments = {};
-                angular.forEach(scope.report_experiments_alias, function(value, key)
-                {
-                    alias_experiments[key] = value;
-                });
-                savecontent["alias_experiments"] = alias_experiments;
-            }
-
-            if(!(jQuery.isEmptyObject(scope.sorted_experiments_keys_tables)) && !(jQuery.isEmptyObject(scope.sorted_experiments_keys_reverse)) && !(jQuery.isEmptyObject(scope.sorted_experiments_keys_tables_sortkey)))
-            {
-                savecontent["sorted_tables_experiments"] = scope.sorted_experiments_keys_tables;
-                savecontent["sorted_tables_alias_experiments"] = scope.sorted_experiments_alias_keys_tables;
-                savecontent["sorted_tables_keys_reverse"] = scope.sorted_experiments_keys_reverse;
-                savecontent["sorted_tables_sortkey"] = scope.sorted_experiments_keys_tables_sortkey;
-            }
-            //call set report content from factory
-            var mydict = {};
-            mydict["experiments"] = scope.report.experiments;
-            mydict["content"] = savecontent;
-
-            for(var i = 0; i < scope.report.experiments.length; i++)
-            {
-                scope.report_experiments_alias_from_content[scope.report.experiments[i]] = scope.report_experiments_alias[scope.report.experiments[i]];
-            }
-
-            updateReport(mydict);
-		});
-
-
-        function updateReport(data)
-        {
-            scope.reportFactory.updateReport(scope.user, scope.report_id, data, scope.url_prefix)
-                .success(function (reportData)
-                {
-                    //alert("The report "+ scope.report_id +" has been saved.");
-
-                    beat.ui.report.report_saved('report_saved', scope);
-                })
-                .error(function (error)
-                {
-                    scope.status = 'Unable to update report data: ' + error.message;
-
-                });
-
-        }
-    }
-});
-
-//Directive for opening smart_selector list on "Add a report item" button click that displays options
-app.directive("lockreport", function($compile)
-{
-	return function(scope, element, attrs)
-    {
-        //add new report item
-		element.bind("click", function()
-        {
-            lockReport();
-		});
-
-
-        function lockReport()
-        {
-             beat.ui.report.lock_report('report_lock', scope);
-        }
-    }
-});
-
-//Directive for opening smart_selector list on "Add a report item" button click that displays options
-app.directive("publishreport", function($compile)
-{
-	return function(scope, element, attrs)
-    {
-        //add new report item
-		element.bind("click", function()
-        {
-            publishReport();
-		});
-
-
-        function publishReport()
-        {
-            scope.reportFactory.publishReportAlgorithms(scope.user, scope.report_id, scope.url_prefix)
-               .success(function (reportData)
-               {
-                    beat.ui.report.publish_report('report_publish', scope, reportData);
-               })
-               .error(function (error)
-               {
-                    scope.status = 'Unable to publish report data: ' + error;
-                    $(".explanation_text").hide();
-                    $("#report_publish .warnings").hide();
-                    $("#report_publish .errors").show();
-                    if(error.detail != undefined)
-                        scope.status = 'Unable to publish report data: ' + error.detail;
-                    $("#report_publish .errors .errorslist").append(scope.status);
-                    $("#button-report_publish-cancel").hide();
-               });
-
-
-        }
-    }
-});
-
-//Directive for opening smart_selector list on "Add a report item" button click that displays options
-app.directive("addreportitem", function($compile)
-{
-	return function(scope, element, attrs)
-    {
-        scope.$on("addSavedElement", function(event, id_content, type)
-        {
-            var num_tables_in_content = 0;
-            var num_figures_in_content = 0;
-            for(var i = 0; i < Object.keys(scope.report.content).length; i++)
-            {
-                if(Object.keys(scope.report.content)[i].indexOf("table_") == 0)
-                {
-                    num_tables_in_content++;
-                }
-                else if(Object.keys(scope.report.content)[i].indexOf("chart_") == 0)
-                {
-                    num_figures_in_content++;
-                }
-            }
-
-            if(type == "table")
-            {
-                var table_id = id_content;
-                var table_details = undefined;
-
-                //take the one with more elements
-                if(Object.keys(scope.tables_details).length > num_tables_in_content)
-                {
-                    table_details = scope.tables_details[id_content];
-                }
-                else
-                {
-                    table_details = scope.report.content[id_content];
-                }
-
-                var name_to_remove = "experiment";
-                for(var i = 0; i < table_details.length; i++)
-                {
-                    if(table_details[i].name == "experiment")
-                    {
-                        table_details.splice(i,1);
-                        break;
-                    }
-                }
-
-                scope.tables_details[table_id] = table_details;
-
-                var accessnumber = "no_number";
-                if(scope.report.number == scope.report_number)
-                {
-                    accessnumber = "number";
-                }
-                var html_div_code = '<div class="panel panel-default" id="' + table_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + table_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-table"> Table</i></a></h4></div><div id="collapse-' + table_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div class="panel-body" table-dynamic monster=' + scope.num_report_items + " tableid=" + table_id + " reportstatus=" + scope.report.status + " accessnumber=" + accessnumber + " urlprefix=" + scope.url_prefix + '></div></div></div>';
-
-                angular.element(document.getElementById('space-for-report-items')).append($compile(html_div_code)(scope));
-                if(parseInt(table_id.split("_").pop(-1)) >= scope.max_num)
-                {
-                    scope.max_num = parseInt(table_id.split("_").pop(-1));
-                    scope.num_report_items = scope.max_num;
-                }
-
-                scope.num_report_items++;
-
-
-            }
-            else if(type == "chart")
-            {
-
-                var content_detail = {};
-                var chart_id = id_content;
-
-                var plot_details = undefined;
-
-                //take the one with more elements
-                if(Object.keys(scope.plots_details).length > num_figures_in_content)
-                {
-                    plot_details = scope.plots_details[chart_id];
-                }
-                else
-                {
-                    plot_details = scope.report.content[chart_id];
-                }
-
-
-
-                content_detail["name"] = plot_details.data.output[0];
-                //content_detail["description"] = scope.report.content[chart_id].data.plotter;
-                if(plot_details.data.plotter != undefined)
-                {
-                    content_detail["selected_plotter"] = plot_details.data.plotter;
-                }
-                if(plot_details.selected_template != undefined)
-                {
-                    content_detail["selected_template"] = plot_details.selected_template;
-                }
-                if(plot_details.data.merged != undefined)
-                {
-                    content_detail["merged"] = plot_details.data.merged;
-                }
-                if(plot_details.merged != undefined)
-                {
-                    content_detail["merged"] = plot_details.merged;
-                }
-
-                var html_div_code = '<div class="panel panel-default" id="' + chart_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + chart_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-area-chart"> ' + content_detail.name + '</i></a></h4></div><div id="collapse-' + chart_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div id="'+chart_id+'" class="panel-body chart {$ report.status $}"></div></div></div>';
-                generate_element(scope, "plot", html_div_code);
-                var element = document.getElementById(chart_id);
-                var label_element  = $(document.createElement('div'));
-                label_element.addClass('row');
-
-                var accessnumber = "no_number";
-                if(scope.report.number == scope.report_number)
-                {
-                    accessnumber = "number";
-                }
-
-                var prepend_buttons = '<div class="col-sm-12"><div class="action-buttons report-buttons pull-left">';
-                var append_buttons = '</div></div>';
-
-                var a_export  = '<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle item_export ' + scope.report.status + ' ' + accessnumber + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-download fa-lg"></i> Export Figure <span class="caret"></span></button><ul class="dropdown-menu"><li id="PNG" buttonexportitem><a>PNG</a></li><li id="JPEG" buttonexportitem><a>JPEG</a></li><li id="PDF" buttonexportitem><a>PDF</a></li></ul></div>';
-                if(scope.report.status == "editable" && scope.report.number != scope.report_number) {
-                  var a_element = '<button class="btn btn-danger btn-sm item_delete ' + scope.report.status + ' ' + accessnumber + '" buttondeleteitem><i class="fa fa-times fa-lg"></i> Delete</button>';
-                  label_element.html(prepend_buttons + a_element + a_export + append_buttons);
-                }
-                else {
-                  label_element.html(prepend_buttons + a_export + append_buttons);
-                }
-;
-                $(element).find('.panel-body').append(label_element);
-                angular.element(document.getElementById('space-for-report-items')).append($compile(element)(scope));
-                //var html_dropdown  = "<chartdropdown id='selector_" + chart_id +"'></chartdropdown>";
-                //angular.element(document.getElementById(chart_id)).append($compile(html_dropdown)(scope));
-
-                _retrieve_chart(scope, content_detail, element);
-
-                if(parseInt(chart_id.split("_").pop(-1)) >= scope.max_num)
-                {
-                    scope.max_num = parseInt(chart_id.split("_").pop(-1));
-                    scope.num_report_items = scope.max_num;
-                }
-
-                scope.num_report_items++;
-
-            }
-
-        }
-        );
-
-        scope.$on("redrawGraphElement", function(event, id_content, type)
-        {
-            var content_detail = {};
-            var chart_id = id_content;
-            content_detail["name"] = scope.report.content[chart_id].data.output[0];
-            //content_detail["description"] = scope.report.content[chart_id].data.plotter;
-            if(scope.report.content[chart_id].data.plotter != undefined)
-            {
-                content_detail["selected_plotter"] = scope.report.content[chart_id].data.plotter;
-            }
-            if(scope.report.content[chart_id].data.parameter != undefined)
-            {
-                content_detail["selected_template"] = scope.report.content[chart_id].data.parameter;
-            }
-            if(scope.report.content[chart_id].data.merged != undefined)
-            {
-                content_detail["merged"] = scope.report.content[chart_id].data.merged;
-            }
-
-            var html_div_code = '<div class="panel panel-default" id="' + chart_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + chart_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-area-chart"> ' + content_detail.name + '</i></a></h4></div><div id="collapse-' + chart_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div id="'+chart_id+'" class="panel-body chart"></div></div></div>';
-            generate_element(scope, "plot", html_div_code);
-            var element = document.getElementById(chart_id);
-            var label_element  = $(document.createElement('div'));
-            label_element.addClass('row');
-
-            var accessnumber = "no_number";
-            if(scope.report.number == scope.report_number)
-            {
-                accessnumber = "number";
-            }
-
-            var prepend_buttons = '<div class="col-sm-12"><div class="action-buttons report-buttons pull-left">';
-            var append_buttons = '</div></div>';
-
-            var a_export  = '<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle item_export ' + scope.report.status + ' ' + accessnumber + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-download fa-lg"></i> Export Figure <span class="caret"></span></button><ul class="dropdown-menu"><li id="PNG" buttonexportitem><a>PNG</a></li><li id="JPEG" buttonexportitem><a>JPEG</a></li><li id="PDF" buttonexportitem><a>PDF</a></li></ul></div>';
-            if(scope.report.status == "editable" && scope.report.number != scope.report_number) {
-              var a_element = '<button class="btn btn-danger btn-sm item_delete ' + scope.report.status + ' ' + accessnumber + '" buttondeleteitem><i class="fa fa-times fa-lg"></i> Delete</button>';
-              label_element.html(prepend_buttons + a_element + a_export + append_buttons);
-            }
-            else {
-              label_element.html(prepend_buttons + a_export + append_buttons);
-            }
-;
-            $(element).find('.panel-body').append(label_element);
-            angular.element(document.getElementById('space-for-report-items')).append($compile(element)(scope));
-            //var html_dropdown  = "<chartdropdown id='selector_" + chart_id +"'></chartdropdown>";
-            //angular.element(document.getElementById(chart_id)).html($compile(html_dropdown)(scope));
-
-            _retrieve_chart(scope, content_detail, element);
-
-        });
-
-        //add new report item
-		element.bind("click", function()
-        {
-            var left = $('.add_item').offset().left - $('.add_item').width() + 400;
-            var top = $('.add_item').offset().top;
-            smart_selector.display(scope.item_content.content, left, top);
-
-            var allblocks = [];
-            for(var i = 0; i < scope.report_experiments_blocks_merged_blocks.length; i++)
-            {
-                allblocks.push(scope.report_experiments_blocks_merged_blocks[i]);
-            }
-            scope.report.common_blocks = arraysInCommon(allblocks);
-		});
-
-        //handles first selector selection (table/plot)
-        if(smart_selector != undefined)
-        {
-            smart_selector.onEntrySelected = function(item_selected)
-            {
-
-                var left = $('.add_item').offset().left - $('.add_item').width() + 400;
-                var top = $('.add_item').offset().top;
-
-                var next_items_for_selector = prepareContent(scope, smart_selector.entries[smart_selector.selected_entry].identifier);
-                smart_selector_detail.display(next_items_for_selector, left, top);
-            };
-        }
-
-        //handles next selector detail selection
-        if(smart_selector_detail != undefined)
-        {
-            smart_selector_detail.onEntrySelected = function(item_selected)
-            {
-                var left = $('.add_item').offset().left - $('.add_item').width() + 400;
-                var top = $('.add_item').offset().top;
-
-
-                var result_next_items = nextDetailContent(scope, smart_selector.entries[smart_selector.selected_entry].identifier, smart_selector_detail.entries[smart_selector_detail.selected_entry]);
-
-                if(!result_next_items[0])
-                {
-                    multiple_selector.display(result_next_items[1], left, top);
-                }
-            };
-        }
-
-        //handles first creation of table based on options
-        if(multiple_selector != undefined)
-        {
-            multiple_selector.onEntrySelected = function(item_selected, data)
-            {
-                for(var i = 0; i < multiple_selector.entries.length; i++)
-                {
-                    if(multiple_selector.entries[i].name == item_selected)
-                    {
-                        multiple_selector.entries[i].selected = true;
-                    }
-                }
-            };
-
-            multiple_selector.onEntryDeselected = function(item_selected, data)
-            {
-                for(var i = 0; i < multiple_selector.entries.length; i++)
-                {
-                    if(multiple_selector.entries[i].name == item_selected)
-                    {
-                        multiple_selector.entries[i].selected = false;
-                    }
-                }
-            };
-
-            multiple_selector.onClose = function()
-            {
-                //check if at least one item is selected
-                var checkOneSelected = false;
-                angular.forEach(multiple_selector.entries, function(value, key)
-                {
-                    if(value.selected)
-                        checkOneSelected = true
-                });
-
-                if(checkOneSelected)
-                {
-                    var table_id = 'table' + '_' + scope.num_report_items;
-
-                    scope.tables_details[table_id] = multiple_selector.entries;
-
-                    var html_div_code = '<div class="panel panel-default" id="' + table_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + table_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-table"> Table</i></a></h4></div><div id="collapse-' + table_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div class="panel-body" table-dynamic monster=' + scope.num_report_items + " tableid=" + table_id + " reportstatus=" + scope.report.status + " urlprefix=" + scope.url_prefix + '></div></div></div>';
-
-                    angular.element(document.getElementById('space-for-report-items')).append($compile(html_div_code)(scope));
-
-                    scope.report.orderedcontent.push(table_id);
-                    scope.num_report_items++;
-                }
-            }
-        }
-
-        //handles single table updates via settings option
-        if(multiple_selector_updater != undefined)
-        {
-            multiple_selector_updater.onEntrySelected = function(item_selected, data)
-            {
-                for(var i = 0; i < multiple_selector_updater.entries.length; i++)
-                {
-                    if(multiple_selector_updater.entries[i].name == item_selected)
-                    {
-                        multiple_selector_updater.entries[i].selected = true;
-                    }
-                }
-            };
-
-            multiple_selector_updater.onEntryDeselected = function(item_selected, data)
-            {
-                for(var i = 0; i < multiple_selector_updater.entries.length; i++)
-                {
-                    if(multiple_selector_updater.entries[i].name == item_selected)
-                    {
-                        multiple_selector_updater.entries[i].selected = false;
-                    }
-                }
-            };
-
-            multiple_selector_updater.onClose = function()
-            {
-
-                //check if at least one item is selected
-                var checkOneSelected = false;
-                angular.forEach(multiple_selector_updater.entries, function(value, key)
-                {
-                    if(value.selected)
-                        checkOneSelected = true
-                });
-
-                if(checkOneSelected)
-                {
-                    var element = document.getElementById(multiple_selector_updater.current_table);
-
-                    $(element).attr('id', null);
-                    $compile(element)(scope);
-                    $(element).attr('id', multiple_selector_updater.current_table);
-                }
-            }
-
-	};
-
-    //Prepare the content for selector initialization
-    function prepareContent(scope, content_identifier)
-    {
-        var next_content_items = [];
-
-        switch(content_identifier)
-        {
-            case 'table':
-                next_content_items =  scope.table_item_content.content;
-                break;
-            case 'plot':
-                angular.forEach(scope.report_experiments, function(value, key)
-                {
-                    angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer)
-                    {
-                        if(value_analyzer.algorithm == scope.report.analyzer)
-                        {
-                            scope.report_experiments[key].analyzer_block = key_analyzer;
-                        }
-                    });
-
-                    var plottable_result = [];
-                    angular.forEach(value.results[scope.report_experiments[key].analyzer_block], function(value_result_item, key_result_item)
-                    {
-                        if(value_result_item.type.startsWith("plot/"))
-                        {
-                            plottable_result.push(key_result_item);
-                        }
-
-                    });
-
-                    scope.report_experiments[key].plottable_blocks = plottable_result;
-
-                });
-
-                //Results block are the same for all experiments from same analyzer.
-                //So just grab information from one of them for smart_selector items
-                var single_experiment = scope.report.experiments[0];
-
-                //create smart_selector items
-                angular.forEach(scope.report_experiments[single_experiment].plottable_blocks, function(value_plottable, key_plottable)
-                {
-                    var plot_type = scope.report_experiments[single_experiment].results[scope.report_experiments[single_experiment].analyzer_block][value_plottable].type;
-                    var item_dict = {};
-                    item_dict["identifier"] = value_plottable;
-                    item_dict["name"] = value_plottable;
-                    item_dict["description"] = plot_type;
-
-                    next_content_items.push(item_dict);
-                });
-                break;
-        }
-
-        return next_content_items;
-    }
-
-    //Get the detailed content for next selector
-    function nextDetailContent(scope, content_identifier, sub_content)
-    {
-        var is_end = false;
-        var next_items = [];
-        var return_contents = [];
-        switch(content_identifier)
-        {
-            case 'table':
-                is_end = false;
-                angular.forEach(scope.report_experiments, function(value, key)
-                {
-                    angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer)
-                    {
-                        if(value_analyzer.algorithm == scope.report.analyzer)
-                        {
-                            scope.report_experiments[key].analyzer_block = key_analyzer;
-                        }
-                    });
-
-                    var table_result = [];
-                    angular.forEach(value.results[scope.report_experiments[key].analyzer_block], function(value_result_item, key_result_item)
-                    {
-                        if(!(value_result_item.type.startsWith("plot/")))
-                        {
-                            table_result.push(key_result_item);
-                        }
-
-                    });
-
-                    scope.report_experiments[key].table_result_blocks = table_result;
-
-                });
-
-                //Results block are the same for all experiments from same analyzer.
-                //So just grab information from one of them for smart_selector items
-                var single_experiment = scope.report.experiments[0];
-
-                //create smart_selector items
-                angular.forEach(scope.report_experiments[single_experiment].table_result_blocks, function(value_table_result, key_table_result)
-                {
-
-                    var table_item_data = scope.report_experiments[single_experiment].results[scope.report_experiments[single_experiment].analyzer_block][value_table_result];
-                    var item_dict = {};
-                    item_dict["identifier"] = value_table_result;
-                    item_dict["name"] = value_table_result;
-                    item_dict["description"] = table_item_data.type;
-                    if(table_item_data.primary)
-                        item_dict["selected"] = true;
-                    else
-                        item_dict["selected"] = false;
-                    item_dict["data"] = table_item_data;
-
-                    next_items.push(item_dict);
-                });
-
-                //adding execution time entry information for common blocks
-                angular.forEach(scope.report.common_blocks, function(value_table_result, key_table_result)
-                {
-                    var item_dict = {};
-                    item_dict["identifier"] = "execution_time." + value_table_result;
-                    item_dict["name"] = "execution_time." + value_table_result;
-                    item_dict["selected"] = false;
-                    next_items.push(item_dict);
-
-                });
-
-                //adding total execution time entry information for experiment
-                var item_dict = {};
-                item_dict["identifier"] = "experiment.execution_time";
-                item_dict["name"] = "experiment.execution_time";
-                item_dict["selected"] = false;
-                next_items.push(item_dict);
-
-                //adding globals algorithms parameters
-                angular.forEach(scope.report_algorithm_parameters, function(value_algorithm_parameters, key_algorithm_parameters)
-                {
-                    for(var i = 0; i < Object.keys(value_algorithm_parameters).length; i++)
-                    {
-                        var item_dict = {};
-                        item_dict["identifier"] = "algorithm_parameter." + key_algorithm_parameters + "__" +Object.keys(value_algorithm_parameters)[i];
-                        item_dict["name"] = "algorithm_parameter." + key_algorithm_parameters + "__" +Object.keys(value_algorithm_parameters)[i];
-                        item_dict["selected"] = false;
-                        next_items.push(item_dict);
-                    }
-
-                });
-
-                break;
-            case 'plot':
-                is_end = true;
-                var chart_id = 'chart_' + sub_content.identifier + '_graph' + '_' + scope.num_report_items;
-                var html_div_code = '<div class="panel panel-default" id="' + chart_id + '"><div class="panel-heading" role="tab"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#info-heading" href="#collapse-' + chart_id + '" aria-expanded="true" aria-controls="collapse-info"><i class="fa fa-area-chart"> ' + sub_content.name + '</i></a></h4></div><div id="collapse-' + chart_id + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading"><div id="'+chart_id+'" class="panel-body chart {$ report.status $}"></div></div></div>';
-                generate_element(scope, content_identifier, html_div_code);
-                var element = document.getElementById(chart_id);
-                var label_element  = $(document.createElement('div'));
-                label_element.addClass('row');
-
-                var accessnumber = "no_number";
-                if(scope.report.number == scope.report_number)
-                {
-                    accessnumber = "number";
-                }
-
-                var prepend_buttons = '<div class="col-sm-12"><div class="action-buttons report-buttons pull-left">';
-                var append_buttons = '</div></div>';
-
-                var a_export  = '<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle item_export ' + scope.report.status + ' ' + accessnumber + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-download fa-lg"></i> Export Figure <span class="caret"></span></button><ul class="dropdown-menu"><li id="PNG" buttonexportitem><a>PNG</a></li><li id="JPEG" buttonexportitem><a>JPEG</a></li><li id="PDF" buttonexportitem><a>PDF</a></li></ul></div>';
-                if(scope.report.status == "editable" && scope.report.number != scope.report_number) {
-                  var a_element = '<button class="btn btn-danger btn-sm item_delete ' + scope.report.status + ' ' + accessnumber + '" buttondeleteitem><i class="fa fa-times fa-lg"></i> Delete</button>';
-                  label_element.html(prepend_buttons + a_element + a_export + append_buttons);
-                }
-                else {
-                  label_element.html(prepend_buttons + a_export + append_buttons);
-                }
-                $(element).find('.panel-body').append(label_element);
-
-                angular.element(document.getElementById('space-for-report-items')).append($compile(element)(scope));
-
-                _retrieve_chart(scope, sub_content, element);
-                scope.report.orderedcontent.push(chart_id);
-                break;
-        }
-
-        return_contents = [is_end, next_items];
-
-        return return_contents;
-
-    }
-
-    //Generate and compile DOM element
-    function generate_element(scope, content_identifier, html_div_code)
-    {
-        switch(content_identifier)
-        {
-            case 'table':
-                angular.element(document.getElementById('space-for-report-items')).append($compile(html_div_code)(scope));
-                scope.num_report_items++;
-                break;
-            case 'plot':
-                angular.element(document.getElementById('space-for-report-items')).append($compile(html_div_code)(scope));
-                scope.num_report_items++;
-                break;
-        }
-
-    }
-
-    //Retrieve chart from api and display on proper item
-    function _get_chart(scope, sub_content, content_type, chart_id)
-    {
-        var required_plotter = [];
-        var set_plotter = ''
-        if(sub_content.selected_plotter != undefined)
-        {
-            //required_plotter.push(sub_content.selected_plotter);
-            set_plotter = sub_content.selected_plotter;
-            var requested_dataformat = '';
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].name == sub_content.selected_plotter)
-                {
-                    requested_dataformat = scope.report.plotters[i].dataformat;
-                    break;
-                }
-            }
-
-            //Get default plotter for required dataformat
-            for (var i = 0; i < scope.report.defaultplotters.length; i++)
-            {
-                if(scope.report.defaultplotters[i].dataformat == requested_dataformat)
-                {
-                    sub_content.defaultplotter = scope.report.defaultplotters[i];
-                    break;
-                }
-            }
-
-            required_plotter.push(sub_content.defaultplotter.plotter);
-
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].dataformat == requested_dataformat && scope.report.plotters[i].name != sub_content.defaultplotter.plotter)
-                {
-                    required_plotter.push(scope.report.plotters[i].name);
-                }
-            }
-        }
-        else
-        {
-            //Get default plotter for required dataformat
-            for (var i = 0; i < scope.report.defaultplotters.length; i++)
-            {
-                if(scope.report.defaultplotters[i].dataformat == sub_content.description)
-                {
-                    sub_content.defaultplotter = scope.report.defaultplotters[i];
-                    break;
-                }
-            }
-
-            required_plotter.push(sub_content.defaultplotter.plotter);
-            set_plotter = sub_content.defaultplotter.plotter;
-
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].dataformat == sub_content.description && scope.report.plotters[i].name != sub_content.defaultplotter.plotter)
-                {
-                    required_plotter.push(scope.report.plotters[i].name);
-                }
-            }
-        }
-
-        var plotterparameter = [];
-        //Get other plotterparameter
-        for (var i = 0; i < scope.report.plotterparameter.length; i++)
-        {
-            plotterparameter.push(scope.report.plotterparameter[i].name);
-        }
-
-        var chart_name = sub_content.name;
-
-        var legend_experiments = '';
-        var alias_experiments = [];
-        for(var i = 0; i < scope.report.experiments.length; i++)
-        {
-            if(i == 0)
-                legend_experiments = scope.report_experiments_alias[scope.report.experiments[i]];
-            else
-                legend_experiments = legend_experiments+ "&" +scope.report_experiments_alias[scope.report.experiments[i]];
-
-            alias_experiments.push(scope.report_experiments_alias[scope.report.experiments[i]]);
-        }
-
-        var request_data = {
-            experiment:   alias_experiments,
-            analyzer:     [scope.report.analyzer],
-            output:       [chart_name],
-            plotter:      set_plotter,
-            legend:       legend_experiments,
-            report_number:  scope.report.number,
-            //height:       300,
-            //width:        400,
-        };
-
-        base_url = scope.report.url_prefix;
-
-        var plot_detail = {};
-        plot_detail["required_plotter"] = required_plotter;
-        plot_detail["data"] =  {
-            analyzer:     [scope.report.analyzer],
-            output:       [chart_name],
-            plotter:      set_plotter,
-        };
-
-        if(sub_content.selected_template != undefined)// && sub_content.selected_template != "Default")
-        {
-            plot_detail["selected_template"] = sub_content.selected_template;
-            request_data.parameter = plot_detail["selected_template"];
-        }
-        else
-        {
-            plot_detail["selected_template"] = sub_content.defaultplotter.parameter;
-            request_data.parameter = plot_detail["selected_template"];
-        }
-
-        if(sub_content.merged != undefined)// && sub_content.selected_template != "Default")
-        {
-            plot_detail["merged"] = sub_content.merged;
-            request_data.merged = plot_detail["merged"];
-        }
-        else
-        {
-            plot_detail["merged"] = true;
-            request_data.merged = plot_detail["merged"];
-        }
-
-        beat.experiments.utils.getPlotData(base_url,
-                                               request_data, required_plotter, plotterparameter, content_type,
-                                               function(r_image_data, selected_content_type) {
-                        download(r_image_data, chart_id + "." + content_type.toLowerCase(), selected_content_type);
-                                               }
-                                               );
-    }
-
-
-    //Retrieve chart from api and display on proper item
-    function _retrieve_chart(scope, sub_content, container)
-    {
-        var required_plotter = [];
-        var set_plotter = ''
-        if(sub_content.selected_plotter != undefined)
-        {
-            //required_plotter.push(sub_content.selected_plotter);
-            set_plotter = sub_content.selected_plotter;
-            var requested_dataformat = '';
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].name == sub_content.selected_plotter)
-                {
-                    requested_dataformat = scope.report.plotters[i].dataformat;
-                    break;
-                }
-            }
-
-            //Get default plotter for required dataformat
-            for (var i = 0; i < scope.report.defaultplotters.length; i++)
-            {
-                if(scope.report.defaultplotters[i].dataformat == requested_dataformat)
-                {
-                    sub_content.defaultplotter = scope.report.defaultplotters[i];
-                    break;
-                }
-            }
-
-            required_plotter.push(sub_content.defaultplotter.plotter);
-
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].dataformat == requested_dataformat && scope.report.plotters[i].name != sub_content.defaultplotter.plotter)
-                {
-                    required_plotter.push(scope.report.plotters[i].name);
-                }
-            }
-        }
-        else
-        {
-            //Get default plotter for required dataformat
-            for (var i = 0; i < scope.report.defaultplotters.length; i++)
-            {
-                if(scope.report.defaultplotters[i].dataformat == sub_content.description)
-                {
-                    sub_content.defaultplotter = scope.report.defaultplotters[i];
-                    break;
-                }
-            }
-
-            required_plotter.push(sub_content.defaultplotter.plotter);
-            set_plotter = sub_content.defaultplotter.plotter;
-
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].dataformat == sub_content.description && scope.report.plotters[i].name != sub_content.defaultplotter.plotter)
-                {
-                    required_plotter.push(scope.report.plotters[i].name);
-                }
-            }
-        }
-
-        var plotterparameter = [];
-        //Get other plotterparameter
-        for (var i = 0; i < scope.report.plotterparameter.length; i++)
-        {
-            plotterparameter.push(scope.report.plotterparameter[i].name);
-        }
-
-        var chart_name = sub_content.name;
-
-        var legend_experiments = '';
-        var alias_experiments = [];
-
-        for(var i = 0; i < scope.report.experiments.length; i++)
-        {
-            if(i == 0)
-                legend_experiments = scope.report_experiments_alias[scope.report.experiments[i]];
-            else
-                legend_experiments = legend_experiments+ "&" +scope.report_experiments_alias[scope.report.experiments[i]];
-
-            if(Object.keys(scope.$parent.report_experiments_alias_from_content).length === 0)
-                alias_experiments.push(scope.report_experiments_alias[scope.report.experiments[i]]);
-            else
-                alias_experiments.push(scope.report_experiments_alias_from_content[scope.report.experiments[i]]);
-        }
-
-        var request_data = {
-            experiment:   alias_experiments,
-            analyzer:     [scope.report.analyzer],
-            output:       [chart_name],
-            plotter:      set_plotter,
-            legend:       legend_experiments,
-            report_number: scope.report.number,
-            //height:       300,
-            //width:        400,
-        };
-
-        base_url = scope.report.url_prefix;
-        //scope.plots_details[container.id];
-
-        var plot_detail = {};
-        plot_detail["required_plotter"] = required_plotter;
-        plot_detail["data"] =  {
-            analyzer:     [scope.report.analyzer],
-            output:       [chart_name],
-            plotter:      set_plotter,
-        };
-
-
-        if(sub_content.selected_template != undefined)// && sub_content.selected_template != "Default")
-        {
-            plot_detail["selected_template"] = sub_content.selected_template;
-            request_data.parameter = plot_detail["selected_template"];
-        }
-        else
-        {
-            plot_detail["selected_template"] = sub_content.defaultplotter.parameter;
-            request_data.parameter = plot_detail["selected_template"];
-        }
-
-        if(sub_content.merged != undefined)// && sub_content.selected_template != "Default")
-        {
-            plot_detail["merged"] = sub_content.merged;
-            request_data.merged = plot_detail["merged"];
-        }
-        else
-        {
-            plot_detail["merged"] = true;
-            request_data.merged = plot_detail["merged"];
-        }
-
-        scope.plots_details[container.id]= plot_detail;
-
-        if(scope.report.status == "editable" && scope.report.number != scope.report_number)
-        {
-            beat.experiments.utils.displayPlot(base_url, $(container).find('.panel-body')[0],
-                                               request_data, required_plotter, plotterparameter, false,
-
-                                               function(r_plotter, r_plotterparameter, r_merged) {
-                                                scope.plots_details[container.id]["data"]["plotter"] = r_plotter;
-                                                scope.plots_details[container.id]["selected_template"] = r_plotterparameter;
-                                                scope.plots_details[container.id]["merged"] = r_merged;
-                                               }
-                                               );
-        }
-        else
-        {
-            beat.experiments.utils.displayPlot(base_url, $(container).find('.panel-body')[0],
-                                               request_data, [], [], false,
-
-                                               function(r_plotter, r_plotterparameter, r_merged) {
-                                               }
-                                               );
-        }
-    }
-
-    function arraysInCommon(arrays)
-    {
-        var i, common,
-        L= arrays.length, min= Infinity;
-        while(L){
-            if(arrays[--L].length<min){
-                min= arrays[L].length;
-                i= L;
-            }
-        }
-        common= arrays.splice(i, 1)[0];
-        return common.filter(function(itm, indx){
-            if(common.indexOf(itm)== indx){
-                return arrays.every(function(arr){
-                    return arr.indexOf(itm)!= -1;
-                });
-            }
-        });
-    }
-
-    }
-});
-
-
-//Dynamic tables items
-app.directive('item', function ($compile) {
-   function createTDElement(column) {
-      var table = angular.element('<table><tr><td class="tableitemspace" thecolumn="' + column + '"></td></tr></table>');
-      return table.find('td');
-   }
-
-   function render(element, scope) {
-    var column, html, i;
-    var columns = scope.$parent.tables_details[scope.$parent.dattrs.tableid];
-
-    for (i = 0; i < columns.length ; i++) {
-        if(i == 0 && columns.length > 0)
-        {
-            html = $compile(createTDElement("experiment"))(scope);
-
-        }
-       column = columns[i];
-       if (column.selected) {
-
-          html = $compile(createTDElement(column.name))(scope);
-          element.append(html);
-       }
-    }
-
-
-   }
-
-   return {
-   //   restrict: 'A',
-      scope: {
-         exp_name: "=",
-         item: "=",
-         columns: "="
-      },
-      compile: function () {
-         return function (scope, element) {
-            render(element, scope);
-         }
-
-      }
-   };
-
-});
-
-//Directive used to set proper item value in selected column
-app.directive("thecolumn",['$compile', function ($compile) {
-
-   return {
-      scope: {
-         thecolumn: "@"
-      },
-      restrict: 'A',
-      template: '{{itemValue}}',
-      controller: ['$scope', function ($scope) {
-
-         var the_parent = $scope.$parent.$parent.$parent.$parent;
-         var report_experiments = $scope.$parent.$parent.$parent.$parent.report_experiments;
-         var report_experiments_alias = $scope.$parent.$parent.$parent.$parent.report_experiments_alias;
-         var floating_point_precision = $scope.$parent.$parent.$parent.$parent.floating_point_precision;
-         var report = $scope.$parent.$parent.$parent.report;
-         var experiment_name = $scope.$parent.item;
-
-         if(jQuery.isEmptyObject(report_experiments) || (report_experiments[experiment_name] == undefined))
-         {
-            return
-         }
-
-         var analyzer_block = report_experiments[experiment_name].analyzer_block;
-         var report_algorithm_parameters_experiment = $scope.$parent.$parent.$parent.$parent.report_algorithm_parameters_experiment;
-
-         if($scope.thecolumn != "experiment")
-         {
-            if(analyzer_block == undefined)
-            {
-                angular.forEach(report_experiments, function(value, key)
-                {
-                    angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer)
-                    {
-                        if(value_analyzer.algorithm == report.analyzer && (key_analyzer in report_experiments[experiment_name].declaration.analyzers))
-                        {
-                            report_experiments[experiment_name].analyzer_block = key_analyzer;
-                            analyzer_block = report_experiments[experiment_name].analyzer_block;
-                        }
-                    });
-                });
-            }
-
-            if($scope.thecolumn.indexOf("execution_time.") == 0)
-            {
-                //execution time information
-                var block_name = $scope.thecolumn.split("execution_time.")[1].split("[s]")[0];
-                if(Object.keys(report_experiments[experiment_name].execution_info).length === 0)
-                {
-                    $scope.itemValue = "-";
-                }
-                else
-                {
-                    if(report_experiments[experiment_name].execution_info[block_name] == undefined)
-                    {
-                        $scope.itemValue = "-";
-                    }
-                    else
-                    {
-                        $scope.itemValue = (report_experiments[experiment_name].execution_info[block_name].linear_execution_time).toFixed(floating_point_precision.selected);;
-                    }
-                }
-            }
-            else if($scope.thecolumn.indexOf("experiment.") == 0)
-            {
-                //total execution time information
-                var block_name = $scope.thecolumn.split("execution_time.")[1];
-                var total_time = 0;
-                if(Object.keys(report_experiments[experiment_name].execution_info).length === 0)
-                {
-                    total_time = "-";
-                }
-                else
-                {
-                    angular.forEach(report_experiments[experiment_name].execution_info, function(value, key)
-                    {
-                        total_time += value.linear_execution_time;
-                    });
-                }
-
-                $scope.itemValue = total_time.toFixed(floating_point_precision.selected);
-            }
-            else if($scope.thecolumn.indexOf("algorithm_parameter.") == 0)
-            {
-                //total execution time information
-                var block_name = $scope.thecolumn.split("algorithm_parameter.")[1];
-                var algorithm_name = block_name.split("__")[0];
-                var parameter_name = block_name.split("__")[1];
-                if(report_algorithm_parameters_experiment[experiment_name][algorithm_name] != undefined)
-                {
-                    var value = "";
-                    if(report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name] != undefined)
-                    {
-                        for(var i = 0; i < report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name].length; i++)
-                        {
-                            if(i > 0 && i < report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name].length -1 )
-                            {
-                                value += ",";
-                            }
-                            value = report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name][i];
-                        }
-                    }
-                    else if(report["all_experiments"][experiment_name]["declaration"]["globals"][algorithm_name][parameter_name] != undefined)
-                    {
-                        //get globals value
-                        value = report["all_experiments"][experiment_name]["declaration"]["globals"][algorithm_name][parameter_name];
-                    }
-                    else
-                    {
-                        //nothing is defined
-                        value = "-";
-                    }
-
-                    $scope.itemValue = value;
-                }
-                else
-                {
-                    $scope.itemValue = "-";
-                }
-            }
-            else
-            {
-                //results information
-                $scope.itemValue = (report_experiments[experiment_name].results[analyzer_block][$scope.thecolumn].value).toFixed(floating_point_precision.selected);
-            }
-         }
-         else
-         {
-                var experiment_alias = report_experiments_alias[experiment_name];
-                $scope.itemValue = experiment_alias;
-         }
-      }]//,
-      //link: function(scope, element, attrs)
-      //{
-      //  console.log(scope);
-      //  var report_experiments_alias = scope.$parent.$parent.$parent.$parent.report_experiments_alias;
-      //  var experiment_name = scope.$parent.item;
-      //  var experiment_alias = report_experiments_alias[experiment_name];
-      //  scope.$watch(scope.$parent.$parent.$parent.$parent.report_experiments_alias,function(newValue, oldValue)
-      //  {
-      //      console.log("changed");
-      //      console.log(report_experiments_alias);
-      //      console.log(oldValue);
-      //      console.log(newValue);
-      //  });
-      //
-      //}
-   }
-}]);
-
-//Directive used to generate the dynamic table loading partials
-app.directive("tableDynamic", function(){
-
-    return {
-        restrict: 'A',
-        scope: true,
-        replace: true,
-        //templateUrl: "/reports/partials/reportTable/",
-        templateUrl: function(scope, elem, attrs)
-        {
-            var prefix = elem['urlprefix'];
-            var the_url = prefix + "/reports/partials/reportTable/";
-            return the_url;
-        },
-        link: function(scope, elem, attrs)
-        {
-             var prepend_item = {};
-             prepend_item["name"] = "experiment";
-             prepend_item["selected"] = true;
-
-             scope.tables_details[attrs.tableid].unshift(prepend_item);
-
-             angular.forEach(scope.tables_details, function(table_value, table_key)
-             {
-                for(var i = 0; i < table_value.length; i++)
-                {
-                    if(table_value[i].name.indexOf("execution_time") > -1 &&
-                       table_value[i].name.indexOf("[s]") == -1)
-                    {
-                        table_value[i].name = table_value[i].name + "[s]";
-                    }
-                };
-             });
-
-             scope.dattrs = attrs;
-        }
-    };
-});
-
-//Directive used to generate the dynamic table loading partials
-app.directive("myreportinfo", function(){
-
-    return {
-        restrict: 'E',
-        scope: true,
-        replace: true,
-        //templateUrl: "/reports/partials/reportTable/",
-        templateUrl: function(scope, elem, attrs)
-        {
-            var prefix = elem['urlprefix'];
-            var the_url = prefix + "/reports/partials/reportInfo/";
-            return the_url;
-        },
-        link: function(scope, elem, attrs)
-        {
-        },
-        controller: ['$scope', function ($scope) {
-        }],
-    };
-});
-
-//Directive used to handle table settings click
-app.directive("buttonsettings", function()
-{
-    return {
-        link:function(scope, element, attrs)
-        {
-            element.bind("click", function()
-            {
-                var name_to_remove = "experiment";
-                var tables_details = scope.$parent.tables_details[scope.dattrs.tableid];
-                for(var i = 0; i < tables_details.length; i++)
-                {
-                    if(tables_details[i].name == "experiment")
-                    {
-                        tables_details.splice(i,1);
-                        break;
-                    }
-                }
-                multiple_selector_updater.current_table = scope.dattrs.tableid;
-                multiple_selector_updater.display(tables_details);
-            });
-        }
-    };
-});
-
-//Directive used to handle table settings click
-app.directive("sortdata", function($compile)
-{
-    return {
-        link:function(scope, element, attrs)
-        {
-            element.bind("click", function()
-            {
-                var the_parent = scope.$parent.$parent.$parent.$parent;
-                var analyzer_block = undefined;
-                var report_experiments = the_parent.report_experiments;
-                var report = the_parent.report;
-                var table_id = attrs.sorttblid;   //get table id
-                the_parent.sorted_tables.push(table_id);
-
-                if(the_parent.sorted_experiments_keys_reverse[table_id] == undefined)
-                {
-                    the_parent.sorted_experiments_keys_reverse[table_id] = true;
-                }
-                else
-                {
-                    the_parent.sorted_experiments_keys_reverse[table_id] = !the_parent.sorted_experiments_keys_reverse[table_id];
-                }
-
-                the_parent.sorted_experiments_keys_tables_sortkey[table_id] = attrs.sortth;   //set the sortKey to the param passed
-
-                if(the_parent.sorted_experiments_keys_tables_sortkey[table_id] != "experiment")
-                {
-                   var local_sort_list = [];
-
-                   if(analyzer_block == undefined)
-                   {
-                       angular.forEach(report_experiments, function(value, key)
-                       {
-                           angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer)
-                           {
-                               if(value_analyzer.algorithm == report.analyzer && (key_analyzer in report_experiments[key].declaration.analyzers))
-                               {
-                                   report_experiments[key].analyzer_block = key_analyzer;
-                                   analyzer_block = report_experiments[key].analyzer_block;
-                               }
-                           });
-                       });
-                   }
-
-                   if(the_parent.sorted_experiments_keys_tables_sortkey[table_id].indexOf("execution_time.") == 0)
-                   {
-                       //execution time information
-                       var block_name = the_parent.sorted_experiments_keys_tables_sortkey[table_id].split("execution_time.")[1].split("[s]")[0];
-                       angular.forEach(report_experiments, function(value, key)
-                       {
-                            var local_sort_dict = {};
-                            local_sort_dict["experiment"] = key;
-                            var itemValue = "";
-
-                            if(Object.keys(report_experiments[key].execution_info).length === 0)
-                            {
-                                itemValue = "-";
-                            }
-                            else
-                            {
-                                if(report_experiments[key].execution_info[block_name] == undefined)
-                                {
-                                    itemValue = "-";
-                                }
-                                else
-                                {
-                                    itemValue = (report_experiments[key].execution_info[block_name].linear_execution_time);
-                                }
-                            }
-
-                            local_sort_dict["value"] = itemValue;
-                            local_sort_list.push(local_sort_dict);
-                       });
-                   }
-                   else if(the_parent.sorted_experiments_keys_tables_sortkey[table_id].indexOf("experiment.") == 0)
-                   {
-                       //total execution time information
-                       var block_name = the_parent.sorted_experiments_keys_tables_sortkey[table_id].split("execution_time.")[1];
-
-                       angular.forEach(report_experiments, function(value, key)
-                       {
-                            var local_sort_dict = {};
-                            local_sort_dict["experiment"] = key;
-                            var itemValue = "";
-                            var total_time = 0;
-
-                            if(Object.keys(report_experiments[key].execution_info).length === 0)
-                            {
-                                total_time = "-";
-                            }
-                            else
-                            {
-                                angular.forEach(report_experiments[key].execution_info, function(value, key)
-                                {
-                                    total_time += value.linear_execution_time;
-                                });
-                            }
-
-                            itemValue = total_time;
-
-                            local_sort_dict["value"] = itemValue;
-                            local_sort_list.push(local_sort_dict);
-                       });
-                   }
-                   else if(the_parent.sorted_experiments_keys_tables_sortkey[table_id].indexOf("algorithm_parameter.") == 0)
-                   {
-                       //total execution time information
-                       var block_name = the_parent.sorted_experiments_keys_tables_sortkey[table_id].split("algorithm_parameter.")[1];
-                       var algorithm_name = block_name.split("__")[0];
-                       var parameter_name = block_name.split("__")[1];
-
-                       angular.forEach(report_experiments, function(value, key)
-                       {
-
-                            var local_sort_dict = {};
-                            local_sort_dict["experiment"] = key;
-                            var itemValue = "";
-
-                            if(the_parent.report_algorithm_parameters_experiment[key][algorithm_name] != undefined)
-                            {
-                                var value = "";
-                                if(the_parent.report_algorithm_parameters_experiment[key][algorithm_name][parameter_name] != undefined)
-                                {
-                                    for(var i = 0; i < the_parent.report_algorithm_parameters_experiment[key][algorithm_name][parameter_name].length; i++)
-                                    {
-                                        if(i > 0 && i < the_parent.report_algorithm_parameters_experiment[key][algorithm_name][parameter_name].length -1 )
-                                        {
-                                            value += ",";
-                                        }
-                                        value = the_parent.report_algorithm_parameters_experiment[key][algorithm_name][parameter_name][i];
-                                    }
-                                }
-                                else if(the_parent.report["all_experiments"][key]["declaration"]["globals"][algorithm_name][parameter_name] != undefined)
-                                {
-                                    //get globals value
-                                    value = the_parent.report["all_experiments"][key]["declaration"]["globals"][algorithm_name][parameter_name];
-                                }
-                                else
-                                {
-                                    //nothing is defined
-                                    value = "-";
-                                }
-
-                                itemValue = value;
-                            }
-                            else
-                            {
-                                itemValue = "-";
-                            }
-
-                            local_sort_dict["value"] = itemValue;
-                            local_sort_list.push(local_sort_dict);
-                       });
-                   }
-                   else
-                   {
-                       //results information
-                       angular.forEach(report_experiments, function(value, key)
-                       {
-                            var local_sort_dict = {};
-                            local_sort_dict["experiment"] = key;
-                            local_sort_dict["value"] = report_experiments[key].results[analyzer_block][the_parent.sorted_experiments_keys_tables_sortkey[table_id]].value;
-
-                            local_sort_list.push(local_sort_dict);
-
-                       });
-
-                   }
-
-                   if(the_parent.sorted_experiments_keys_reverse[table_id])
-                   {
-                        local_sort_list.sort(function(a, b)
-                        {
-                             return a.value - b.value;
-                        });
-                   }
-                   else
-                   {
-                        local_sort_list.sort(function(a, b)
-                        {
-                             return b.value - a.value;
-                        });
-                   }
-
-                   the_parent.sorted_experiments_keys_tables[table_id] = [];
-                   the_parent.sorted_experiments_alias_keys_tables[table_id] = [];
-                   for(var i = 0; i < local_sort_list.length; i++)
-                   {
-                       the_parent.sorted_experiments_keys_tables[table_id].push(local_sort_list[i]["experiment"]);
-                       if(the_parent.report.status ==  "editable")
-                       {
-                           the_parent.sorted_experiments_alias_keys_tables[table_id].push(the_parent.report_experiments_alias[local_sort_list[i]["experiment"]]);
-                       }
-                   }
-
-                }
-                else
-                {
-                    var experiments_aliases = [];
-                    for(var i = 0; i < the_parent.report.experiments.length; i++)
-                    {
-                        var experiment_name  = the_parent.report.experiments[i];
-                        var experiment_alias = the_parent.report_experiments_alias[experiment_name];
-                        experiments_aliases.push(experiment_alias);
-                    }
-
-                    if(the_parent.sorted_experiments_keys_reverse[table_id])
-                    {
-                        experiments_aliases.sort(function(a, b)
-                        {
-                             return a.value - b.value;
-                        });
-                    }
-                    else
-                    {
-                        experiments_aliases.reverse(function(a, b)
-                        {
-                             return b.value - a.value;
-                        });
-                    }
-
-                    the_parent.sorted_experiments_keys_tables[table_id] = [];
-                    the_parent.sorted_experiments_alias_keys_tables[table_id] = [];
-                    for(var i = 0; i < experiments_aliases.length; i++)
-                    {
-                        for(var the_experiment_key in the_parent.report_experiments_alias)
-                        {
-                            if(the_parent.report_experiments_alias[the_experiment_key] == experiments_aliases[i])
-                            {
-                                the_parent.sorted_experiments_keys_tables[table_id].push(the_experiment_key);
-                                if(the_parent.report.status ==  "editable")
-                                {
-                                    the_parent.sorted_experiments_alias_keys_tables[table_id].push(the_parent.report_experiments_alias[the_experiment_key]);
-                                }
-                            }
-
-                        }
-                    }
-                }
-
-                var name_to_remove = "experiment";
-                var tables_details = the_parent.tables_details[table_id];
-                for(var i = 0; i < tables_details.length; i++)
-                {
-                    if(tables_details[i].name == "experiment")
-                    {
-                        tables_details.splice(i,1);
-                        break;
-                    }
-                }
-
-                var element = document.getElementById(table_id);
-
-                $(element).attr('id', null);
-                $compile(element)(scope.$parent.$parent);
-                $(element).attr('id', table_id);
-            });
-        }
-    };
-});
-
-//Directive used to handle table settings click
-app.directive("tableprecision", function($compile)
-{
-    return {
-        link:function(scope, element, attrs)
-        {
-            element.bind("change", function()
-            {
-                fixFloatingPoint(scope.$parent.$parent.floating_point_precision.selected);
-            });
-
-            function fixFloatingPoint(selected_precision)
-            {
-                if(!scope.$$phase)
-                {
-                    //$digest or $apply
-                    var parent_scope = scope.$parent;
-                    var table_details = parent_scope.tables_details;
-
-                    for(var i = 0; i < parent_scope.report.orderedcontent.length; i++)
-                    {
-                        var element = document.getElementById(parent_scope.report.orderedcontent[i]);
-
-                        $(element).remove();
-
-                        var id_content = parent_scope.report.orderedcontent[i];
-                        var type = id_content.split("_")[0];
-                        parent_scope.$parent.$parent.$broadcast("addSavedElement", id_content, type);
-                    }
-                }
-            }
-        }
-    };
-});
-
-//Directive used to handle table settings click
-app.directive("buttondeleteitem", function()
-{
-    return {
-        link:function(scope, element, attrs)
-        {
-            element.bind("click", function()
-            {
-                var elementToRemove = element.context.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
-                beat.ui.report.remove_item('report_remove_item', elementToRemove, scope);
-            });
-        }
-    };
-});
-
-//Directive used to export graph/tables on click
-app.directive("buttonexportitem", function()
-{
-    return {
-        link:function(scope, element, attrs)
-        {
-            element.bind("click", function()
-            {
-                var the_element = element.context.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
-                if(the_element.id.indexOf("chart_") == 0)
-                {
-                    var content_detail = {};
-                    var chart_id = the_element.id;
-
-                    content_detail["name"] = scope.plots_details[chart_id].data.output[0];
-
-                    if(scope.plots_details[chart_id].data.plotter != undefined)
-                    {
-                        content_detail["selected_plotter"] = scope.plots_details[chart_id].data.plotter;
-                    }
-                    if(scope.plots_details[chart_id].data.parameter != undefined)
-                    {
-                        content_detail["selected_template"] = scope.plots_details[chart_id].data.parameter;
-                    }
-                    if(scope.plots_details[chart_id].data.merged != undefined)
-                    {
-                        content_detail["merged"] = scope.plots_details[chart_id].data.merged;
-                    }
-
-                    var accessnumber = "no_number";
-                    if(scope.report.number == scope.report_number)
-                    {
-                        accessnumber = "number";
-                    }
-                    _get_chart(scope, content_detail, element[0].id, chart_id);
-                }
-                else if(the_element.id.indexOf("table_") == 0)
-                {
-                    var separator = ",";
-                    var csv_text = export_table_as_csv(scope, the_element.id, separator);
-                    var output_filename = the_element.id + ".csv";
-                    download(csv_text, output_filename, "text/plain");
-                }
-            });
-        }
-    };
-
-    function export_table_as_csv(scope, table_id, separator)
-    {
-        var report_experiments = scope.$parent.report_experiments;
-        var report_experiments_alias = scope.$parent.report_experiments_alias;
-        var floating_point_precision = scope.$parent.floating_point_precision;
-        var report = scope.report;
-        var final_table = [];
-        var table_headers = [];
-        angular.forEach(scope.tables_details[table_id], function(table_value, table_key)
-        {
-            if(table_value.selected)
-            {
-                table_headers.push(table_value.name);
-            }
-        });
-
-        final_table.push(table_headers);
-
-        angular.forEach(report_experiments, function(experiment_value, experiment_key)
-        {
-            var table_items = [];
-
-            angular.forEach(table_headers, function(table_value, table_key)
-            {
-                var experiment_name = experiment_key;
-                var analyzer_block = report_experiments[experiment_name].analyzer_block;
-                var report_algorithm_parameters_experiment = scope.$parent.report_algorithm_parameters_experiment;
-
-                if(table_value != "experiment")
-                {
-                   if(analyzer_block == undefined)
-                   {
-                       angular.forEach(report_experiments, function(value, key)
-                       {
-                           angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer)
-                           {
-                               if(value_analyzer.algorithm == report.analyzer && (key_analyzer in report_experiments[experiment_name].declaration.analyzers))
-                               {
-                                   report_experiments[experiment_name].analyzer_block = key_analyzer;
-                                   analyzer_block = report_experiments[experiment_name].analyzer_block;
-                               }
-                           });
-                       });
-                   }
-
-                   if(table_value.indexOf("execution_time.") == 0)
-                   {
-                       //execution time information
-                       var block_name = table_value.split("execution_time.")[1].split("[s]")[0];
-                       if(Object.keys(report_experiments[experiment_name].execution_info).length === 0)
-                       {
-                           table_items.push("-");
-                       }
-                       else
-                       {
-                           if(report_experiments[experiment_name].execution_info[block_name] == undefined)
-                           {
-                               table_items.push("-");
-                           }
-                           else
-                           {
-                               table_items.push((report_experiments[experiment_name].execution_info[block_name].linear_execution_time).toFixed(floating_point_precision.selected));
-                           }
-                       }
-                   }
-                   else if(table_value.indexOf("experiment.") == 0)
-                   {
-                       //total execution time information
-                       var block_name = table_value.split("execution_time.")[1];
-                       var total_time = 0;
-                       if(Object.keys(report_experiments[experiment_name].execution_info).length === 0)
-                       {
-                           total_time = "-";
-                       }
-                       else
-                       {
-                           angular.forEach(report_experiments[experiment_name].execution_info, function(value, key)
-                           {
-                               total_time += value.linear_execution_time;
-                           });
-                       }
-
-                       table_items.push(total_time.toFixed(floating_point_precision.selected));
-                   }
-                   else if(table_value.indexOf("algorithm_parameter.") == 0)
-                   {
-                       //total execution time information
-                       var block_name = table_value.split("algorithm_parameter.")[1];
-                       var algorithm_name = block_name.split("__")[0];
-                       var parameter_name = block_name.split("__")[1];
-                       if(report_algorithm_parameters_experiment[experiment_name][algorithm_name] != undefined)
-                       {
-                           var value = "";
-                           for(var i = 0; i < report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name].length; i++)
-                           {
-                               if(i > 0 && i < report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name].length -1 )
-                               {
-                                   value += ",";
-                               }
-                               value = report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name][i];
-                           }
-
-                           table_items.push(value);
-                       }
-                       else
-                       {
-                           table_items.push("-");
-                       }
-                   }
-                   else
-                   {
-                       //results information
-                       table_items.push((report_experiments[experiment_name].results[analyzer_block][table_value].value).toFixed(floating_point_precision.selected));
-                   }
-                }
-                else
-                {
-                   var experiment_alias = report_experiments_alias[experiment_name];
-                   table_items.push(experiment_alias);
-                }
-
-            });
-
-            final_table.push(table_items);
-
-        });
-
-        var csv_text = "";
-        for(var i = 0; i < final_table.length; i++)
-        {
-            if(i != 0)
-            {
-                csv_text += "\n";
-            }
-
-            for(var j = 0; j < final_table[i].length; j++)
-            {
-                if( j != 0)
-                {
-                    csv_text += separator;
-                }
-                csv_text += final_table[i][j];
-            }
-        }
-
-        var pre_base64_text = "data:text/plain;base64,";
-        var base_64_csv_text = pre_base64_text + Base64.encode(csv_text);
-        return base_64_csv_text;
-    }
-
-    //Retrieve chart from api and display on proper item
-    function _get_chart(scope, sub_content, content_type, chart_id)
-    {
-        var required_plotter = [];
-        var set_plotter = ''
-        if(sub_content.selected_plotter != undefined)
-        {
-            //required_plotter.push(sub_content.selected_plotter);
-            set_plotter = sub_content.selected_plotter;
-            var requested_dataformat = '';
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].name == sub_content.selected_plotter)
-                {
-                    requested_dataformat = scope.report.plotters[i].dataformat;
-                    break;
-                }
-            }
-
-            //Get default plotter for required dataformat
-            for (var i = 0; i < scope.report.defaultplotters.length; i++)
-            {
-                if(scope.report.defaultplotters[i].dataformat == requested_dataformat)
-                {
-                    sub_content.defaultplotter = scope.report.defaultplotters[i];
-                    break;
-                }
-            }
-
-            required_plotter.push(sub_content.defaultplotter.plotter);
-
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].dataformat == requested_dataformat && scope.report.plotters[i].name != sub_content.defaultplotter.plotter)
-                {
-                    required_plotter.push(scope.report.plotters[i].name);
-                }
-            }
-        }
-        else
-        {
-            //Get default plotter for required dataformat
-            for (var i = 0; i < scope.report.defaultplotters.length; i++)
-            {
-                if(scope.report.defaultplotters[i].dataformat == sub_content.description)
-                {
-                    sub_content.defaultplotter = scope.report.defaultplotters[i];
-                    break;
-                }
-            }
-
-            required_plotter.push(sub_content.defaultplotter.plotter);
-            set_plotter = sub_content.defaultplotter.plotter;
-
-            //Get other plotters for required dataformat
-            for (var i = 0; i < scope.report.plotters.length; i++)
-            {
-                if(scope.report.plotters[i].dataformat == sub_content.description && scope.report.plotters[i].name != sub_content.defaultplotter.plotter)
-                {
-                    required_plotter.push(scope.report.plotters[i].name);
-                }
-            }
-        }
-
-        var plotterparameter = [];
-        //Get other plotterparameter
-        for (var i = 0; i < scope.report.plotterparameter.length; i++)
-        {
-            plotterparameter.push(scope.report.plotterparameter[i].name);
-        }
-
-        var chart_name = sub_content.name;
-
-        var legend_experiments = '';
-        for(var i = 0; i < scope.report.experiments.length; i++)
-        {
-            if(i == 0)
-                legend_experiments = scope.report_experiments_alias[scope.report.experiments[i]];
-            else
-                legend_experiments = legend_experiments+ "&" +scope.report_experiments_alias[scope.report.experiments[i]];
-        }
-
-        var request_data = {
-            experiment:   scope.report.experiments,
-            analyzer:     [scope.report.analyzer],
-            output:       [chart_name],
-            plotter:      set_plotter,
-            legend:       legend_experiments,
-            //height:       300,
-            //width:        400,
-        };
-
-        base_url = scope.report.url_prefix;
-
-        var plot_detail = {};
-        plot_detail["required_plotter"] = required_plotter;
-        plot_detail["data"] = request_data;
-        if(sub_content.selected_template != undefined)// && sub_content.selected_template != "Default")
-        {
-            plot_detail["selected_template"] = sub_content.selected_template;
-            request_data.parameter = plot_detail["selected_template"];
-        }
-        else
-        {
-            plot_detail["selected_template"] = sub_content.defaultplotter.parameter;
-            request_data.parameter = plot_detail["selected_template"];
-        }
-
-        if(sub_content.merged != undefined)// && sub_content.selected_template != "Default")
-        {
-            plot_detail["merged"] = sub_content.merged;
-            request_data.merged = plot_detail["merged"];
-        }
-        else
-        {
-            plot_detail["merged"] = true;
-            request_data.merged = plot_detail["merged"];
-        }
-
-        beat.experiments.utils.getPlotData(base_url,
-                                               request_data, required_plotter, plotterparameter, content_type,
-                                               function(r_image_data, selected_content_type) {
-                        download(r_image_data, chart_id + "." + content_type.toLowerCase(), selected_content_type);
-                                               }
-                                               );
-    }
-
-
-});
-
-
-//Directive used to handle table settings click
-app.directive("aliasexperiment", function($compile)
-{
-    return {
-        link:function(scope, element, attrs)
-        {
-            var alias_name = scope.$parent.$parent.$parent.$parent.report_experiments_alias[scope.name];
-            createAlias(scope.name, alias_name);
-
-            /*
-            element.on("blur", function()
-            {
-              val = $(this).val();
-              if (!val) {
-                alert("Alias for experiment" + scope.name + " can't be empty!");
-              }
-              else {
-                var experiment_name = this.id.split("input_")[1];
-                createAlias(experiment_name, val);
-              }
-            });
-            */
-
-            element.bind("click", function()
-            {
-                var input_element = document.getElementById("input_"+scope.name);
-                var icon_element = document.getElementById("icon_"+scope.name);
-                var button_element = document.getElementById("button_alias_"+scope.name);
-                if(! $(input_element).hasClass("input-disabled"))
-                {
-                    if ($(input_element).val())
-                    {
-                        $(input_element).addClass("input-disabled");
-                        $(input_element).attr("disabled", true);
-                        $(icon_element).removeClass("fa-unlock");
-                        $(icon_element).addClass("fa-lock");
-                        $(button_element).addClass("setalias");
-                        var experiment_name = attrs.id.split("button_alias_")[1];
-                        var alias_name = $(input_element).val();
-                        $(input_element).val(alias_name);
-                        createAlias(experiment_name, alias_name);
-                    }
-                    else
-                    {
-                        alert("Alias for experiment" + scope.name + " can't be empty!");
-                    }
-                }
-                else
-                {
-                    $(input_element).removeClass("input-disabled");
-                    $(input_element).attr("disabled", false);
-                    $(icon_element).removeClass("fa-lock");
-                    $(icon_element).addClass("fa-unlock");
-                    $(button_element).removeClass("setalias");
-
-                }
-            });
-
-            function createAlias(experiment_name, alias_name)
-            {
-                scope.report_experiments_alias[experiment_name] = alias_name;
-                scope.$parent.$parent.$parent.$parent.report_experiments_alias[experiment_name] = alias_name;
-
-                if(!scope.$$phase)
-                {
-                    //$digest or $apply
-                    var parent_scope = scope.$parent.$parent.$parent.$parent
-                    var table_details = parent_scope.tables_details;
-
-                    for(var i = 0; i < parent_scope.report.orderedcontent.length; i++)
-                    {
-                        var element = document.getElementById(parent_scope.report.orderedcontent[i]);
-
-                        $(element).remove();
-
-                        var id_content = parent_scope.report.orderedcontent[i];
-                        var type = id_content.split("_")[0];
-                        parent_scope.$parent.$broadcast("addSavedElement", id_content, type);
-                    }
-                }
-            }
-        }
-    };
-});
-
-
-////Directive used to generate the dynamic table loading partials
-//app.directive("chartdropdown", function(){
-//    return {
-//        restrict: 'E',
-//        scope: true,
-//        replace: true,
-//        templateUrl:"/reports/partials/reportChartDropDown/",
-//        link: function(scope, element, attrs)
-//        {
-//            scope.dattrs = attrs;
-//            var element_id = (element.context.id).split("selector_");
-//            var selected_template = scope.plots_details[element_id[1]].selected_template;
-//            if(selected_template != undefined)
-//            {
-//
-//                scope.dattrs.selected_template = selected_template;
-//                var selector_name = "#"+element.context.id + " select";
-//            }
-//            else
-//            {
-//                scope.dattrs.selected_template = "Default";
-//            }
-//
-//            element.bind("change", function()
-//            {
-//                var selected_template = element.context.children[0].selectedOptions[0].label;
-//                var elem_id = (attrs.id).split("selector_");
-//
-//                scope.plots_details[elem_id[1]].selected_template = selected_template;
-//
-//
-//                var type = "afdaf";
-//                var id_content = elem_id[1];
-//                scope.$parent.report.content[id_content].selected_template = selected_template;
-//                scope.$parent.$broadcast("redrawGraphElement", id_content, type);
-//
-//            });
-//
-//        }
-//
-//    };
-//});
diff --git a/beat/web/reports/static/reports/app/directives/saveReportItems.js b/beat/web/reports/static/reports/app/directives/saveReportItems.js
new file mode 100644
index 000000000..217865157
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/saveReportItems.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive for opening smart_selector list on "Add a report item" button click that displays options
+angular.module('reportApp').directive("savereportitems", function($compile){
+	return function(scope, element, attrs){
+		//add new report item
+		element.bind("click", function(){
+			//var savecontent = [];
+			var savecontent = {};
+			if(scope.plots_details != undefined){
+				angular.forEach(scope.plots_details, function(value, key){
+					//savecontent.push(key, value);
+					savecontent[key] = value;
+				});
+			}
+			if(scope.tables_details != undefined){
+				angular.forEach(scope.tables_details, function(value, key){
+					savecontent[key] = value;
+					//savecontent.push(key, value);
+				});
+
+				if(scope.floating_point_precision.selected != undefined){
+					savecontent["floating_point_precision"] = scope.floating_point_precision.selected;
+				}
+			}
+			if(scope.report_experiments_alias != undefined){
+				var alias_experiments = {};
+				angular.forEach(scope.report_experiments_alias, function(value, key){
+					alias_experiments[key] = value;
+				});
+				savecontent["alias_experiments"] = alias_experiments;
+			}
+
+			if(!(jQuery.isEmptyObject(scope.sorted_experiments_keys_tables)) && !(jQuery.isEmptyObject(scope.sorted_experiments_keys_reverse)) && !(jQuery.isEmptyObject(scope.sorted_experiments_keys_tables_sortkey))){
+				savecontent["sorted_tables_experiments"] = scope.sorted_experiments_keys_tables;
+				savecontent["sorted_tables_alias_experiments"] = scope.sorted_experiments_alias_keys_tables;
+				savecontent["sorted_tables_keys_reverse"] = scope.sorted_experiments_keys_reverse;
+				savecontent["sorted_tables_sortkey"] = scope.sorted_experiments_keys_tables_sortkey;
+			}
+			//call set report content from factory
+			var mydict = {};
+			mydict["experiments"] = scope.report.experiments;
+			mydict["content"] = savecontent;
+
+			for(var i = 0; i < scope.report.experiments.length; i++){
+				scope.report_experiments_alias_from_content[scope.report.experiments[i]] = scope.report_experiments_alias[scope.report.experiments[i]];
+			}
+
+			updateReport(mydict);
+		});
+
+
+		function updateReport(data){
+			scope.reportFactory.updateReport(scope.user, scope.report_id, data, scope.url_prefix)
+			.success(function (reportData){
+				//alert("The report "+ scope.report_id +" has been saved.");
+
+				beat.ui.report.report_saved('report_saved', scope);
+			})
+			.error(function (error){
+				scope.status = 'Unable to update report data: ' + error.message;
+
+			});
+
+		}
+	};
+});
+
+
diff --git a/beat/web/reports/static/reports/app/directives/sortData.js b/beat/web/reports/static/reports/app/directives/sortData.js
new file mode 100644
index 000000000..e2a39dade
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/sortData.js
@@ -0,0 +1,234 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to handle table settings click
+angular.module('reportApp').directive("sortdata", function($compile){
+	return {
+		link:function(scope, element, attrs){
+			element.bind("click", function(){
+				var the_parent = scope.$parent.$parent.$parent.$parent;
+				var analyzer_block = undefined;
+				var report_experiments = the_parent.report_experiments;
+				var report = the_parent.report;
+				var table_id = attrs.sorttblid;   //get table id
+				the_parent.sorted_tables.push(table_id);
+
+				if(the_parent.sorted_experiments_keys_reverse[table_id] == undefined){
+					the_parent.sorted_experiments_keys_reverse[table_id] = true;
+				}
+				else{
+					the_parent.sorted_experiments_keys_reverse[table_id] = !the_parent.sorted_experiments_keys_reverse[table_id];
+				}
+
+				the_parent.sorted_experiments_keys_tables_sortkey[table_id] = attrs.sortth;   //set the sortKey to the param passed
+
+				if(the_parent.sorted_experiments_keys_tables_sortkey[table_id] != "experiment"){
+					var local_sort_list = [];
+
+					if(analyzer_block == undefined){
+						angular.forEach(report_experiments, function(value, key){
+							angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer){
+								if(value_analyzer.algorithm == report.analyzer && (key_analyzer in report_experiments[key].declaration.analyzers)){
+									report_experiments[key].analyzer_block = key_analyzer;
+									analyzer_block = report_experiments[key].analyzer_block;
+								}
+							});
+						});
+					}
+
+					if(the_parent.sorted_experiments_keys_tables_sortkey[table_id].indexOf("execution_time.") == 0){
+						//execution time information
+						var block_name = the_parent.sorted_experiments_keys_tables_sortkey[table_id].split("execution_time.")[1].split("[s]")[0];
+						angular.forEach(report_experiments, function(value, key){
+							var local_sort_dict = {};
+							local_sort_dict["experiment"] = key;
+							var itemValue = "";
+
+							if(Object.keys(report_experiments[key].execution_info).length === 0){
+								itemValue = "-";
+							}
+							else{
+								if(report_experiments[key].execution_info[block_name] == undefined){
+									itemValue = "-";
+								}
+								else{
+									itemValue = (report_experiments[key].execution_info[block_name].linear_execution_time);
+								}
+							}
+
+							local_sort_dict["value"] = itemValue;
+							local_sort_list.push(local_sort_dict);
+						});
+					}
+					else if(the_parent.sorted_experiments_keys_tables_sortkey[table_id].indexOf("experiment.") == 0){
+						//total execution time information
+						var block_name = the_parent.sorted_experiments_keys_tables_sortkey[table_id].split("execution_time.")[1];
+
+						angular.forEach(report_experiments, function(value, key){
+							var local_sort_dict = {};
+							local_sort_dict["experiment"] = key;
+							var itemValue = "";
+							var total_time = 0;
+
+							if(Object.keys(report_experiments[key].execution_info).length === 0){
+								total_time = "-";
+							}
+							else{
+								angular.forEach(report_experiments[key].execution_info, function(value, key){
+									total_time += value.linear_execution_time;
+								});
+							}
+
+							itemValue = total_time;
+
+							local_sort_dict["value"] = itemValue;
+							local_sort_list.push(local_sort_dict);
+						});
+					}
+					else if(the_parent.sorted_experiments_keys_tables_sortkey[table_id].indexOf("algorithm_parameter.") == 0){
+						//total execution time information
+						var block_name = the_parent.sorted_experiments_keys_tables_sortkey[table_id].split("algorithm_parameter.")[1];
+						var algorithm_name = block_name.split("__")[0];
+						var parameter_name = block_name.split("__")[1];
+
+						angular.forEach(report_experiments, function(value, key){
+
+							var local_sort_dict = {};
+							local_sort_dict["experiment"] = key;
+							var itemValue = "";
+
+							if(the_parent.report_algorithm_parameters_experiment[key][algorithm_name] != undefined){
+								var value = "";
+								if(the_parent.report_algorithm_parameters_experiment[key][algorithm_name][parameter_name] != undefined){
+									for(var i = 0; i < the_parent.report_algorithm_parameters_experiment[key][algorithm_name][parameter_name].length; i++){
+										if(i > 0 && i < the_parent.report_algorithm_parameters_experiment[key][algorithm_name][parameter_name].length -1 ){
+											value += ",";
+										}
+										value = the_parent.report_algorithm_parameters_experiment[key][algorithm_name][parameter_name][i];
+									}
+								}
+								else if(the_parent.report["all_experiments"][key]["declaration"]["globals"][algorithm_name][parameter_name] != undefined){
+									//get globals value
+									value = the_parent.report["all_experiments"][key]["declaration"]["globals"][algorithm_name][parameter_name];
+								}
+								else{
+									//nothing is defined
+									value = "-";
+								}
+
+								itemValue = value;
+							}
+							else{
+								itemValue = "-";
+							}
+
+							local_sort_dict["value"] = itemValue;
+							local_sort_list.push(local_sort_dict);
+						});
+					}
+					else{
+						//results information
+						angular.forEach(report_experiments, function(value, key){
+							var local_sort_dict = {};
+							local_sort_dict["experiment"] = key;
+							local_sort_dict["value"] = report_experiments[key].results[analyzer_block][the_parent.sorted_experiments_keys_tables_sortkey[table_id]].value;
+
+							local_sort_list.push(local_sort_dict);
+
+						});
+
+					}
+
+					if(the_parent.sorted_experiments_keys_reverse[table_id]){
+						local_sort_list.sort(function(a, b){
+							return a.value - b.value;
+						});
+					}
+					else{
+						local_sort_list.sort(function(a, b){
+							return b.value - a.value;
+						});
+					}
+
+					the_parent.sorted_experiments_keys_tables[table_id] = [];
+					the_parent.sorted_experiments_alias_keys_tables[table_id] = [];
+					for(var i = 0; i < local_sort_list.length; i++){
+						the_parent.sorted_experiments_keys_tables[table_id].push(local_sort_list[i]["experiment"]);
+						if(the_parent.report.status ==  "editable"){
+							the_parent.sorted_experiments_alias_keys_tables[table_id].push(the_parent.report_experiments_alias[local_sort_list[i]["experiment"]]);
+						}
+					}
+
+				}
+				else{
+					var experiments_aliases = [];
+					for(var i = 0; i < the_parent.report.experiments.length; i++){
+						var experiment_name  = the_parent.report.experiments[i];
+						var experiment_alias = the_parent.report_experiments_alias[experiment_name];
+						experiments_aliases.push(experiment_alias);
+					}
+
+					if(the_parent.sorted_experiments_keys_reverse[table_id]){
+						experiments_aliases.sort(function(a, b){
+							return a.value - b.value;
+						});
+					}
+					else{
+						experiments_aliases.reverse(function(a, b){
+							return b.value - a.value;
+						});
+					}
+
+					the_parent.sorted_experiments_keys_tables[table_id] = [];
+					the_parent.sorted_experiments_alias_keys_tables[table_id] = [];
+					for(var i = 0; i < experiments_aliases.length; i++){
+						for(var the_experiment_key in the_parent.report_experiments_alias){
+							if(the_parent.report_experiments_alias[the_experiment_key] == experiments_aliases[i]){
+								the_parent.sorted_experiments_keys_tables[table_id].push(the_experiment_key);
+								if(the_parent.report.status ==  "editable"){
+									the_parent.sorted_experiments_alias_keys_tables[table_id].push(the_parent.report_experiments_alias[the_experiment_key]);
+								}
+							}
+
+						}
+					}
+				}
+
+				var name_to_remove = "experiment";
+				var tables_details = the_parent.tables_details[table_id];
+				for(var i = 0; i < tables_details.length; i++){
+					if(tables_details[i].name == "experiment"){
+						tables_details.splice(i,1);
+						break;
+					}
+				}
+
+				var element = document.getElementById(table_id);
+
+				$(element).attr('id', null);
+				$compile(element)(scope.$parent.$parent);
+				$(element).attr('id', table_id);
+			});
+		}
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/tableDynamic.js b/beat/web/reports/static/reports/app/directives/tableDynamic.js
new file mode 100644
index 000000000..6a116415b
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/tableDynamic.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to generate the dynamic table loading partials
+angular.module('reportApp').directive("tableDynamic", function(){
+	return {
+		restrict: 'A',
+		scope: true,
+		replace: true,
+		    //templateUrl: "/reports/partials/reportTable/",
+		    templateUrl: function(scope, elem, attrs){
+			var prefix = elem['urlprefix'];
+			        var the_url = prefix + "/reports/partials/reportTable/";
+			return the_url;
+		},
+		link: function(scope, elem, attrs){
+			var prepend_item = {};
+			prepend_item["name"] = "experiment";
+			prepend_item["selected"] = true;
+
+			scope.tables_details[attrs.tableid].unshift(prepend_item);
+
+			angular.forEach(scope.tables_details, function(table_value, table_key){
+				for(var i = 0; i < table_value.length; i++){
+					if(table_value[i].name.indexOf("execution_time") > -1 &&
+						table_value[i].name.indexOf("[s]") == -1){
+						table_value[i].name = table_value[i].name + "[s]";
+					}
+				};
+			});
+
+			scope.dattrs = attrs;
+		}
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/tablePrecision.js b/beat/web/reports/static/reports/app/directives/tablePrecision.js
new file mode 100644
index 000000000..7f82452bd
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/tablePrecision.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to handle table settings click
+angular.module('reportApp').directive("tableprecision", function($compile){
+	return {
+		link:function(scope, element, attrs){
+			element.bind("change", function(){
+				fixFloatingPoint(scope.$parent.$parent.floating_point_precision.selected);
+			});
+
+			function fixFloatingPoint(selected_precision){
+				if(!scope.$$phase){
+					//$digest or $apply
+					var parent_scope = scope.$parent;
+					var table_details = parent_scope.tables_details;
+
+					for(var i = 0; i < parent_scope.report.orderedcontent.length; i++){
+						var element = document.getElementById(parent_scope.report.orderedcontent[i]);
+
+						$(element).remove();
+
+						var id_content = parent_scope.report.orderedcontent[i];
+						var type = id_content.split("_")[0];
+						parent_scope.$parent.$parent.$broadcast("addSavedElement", id_content, type);
+					}
+				}
+			}
+		}
+	};
+});
+
diff --git a/beat/web/reports/static/reports/app/directives/theColumn.js b/beat/web/reports/static/reports/app/directives/theColumn.js
new file mode 100644
index 000000000..30e2de5b8
--- /dev/null
+++ b/beat/web/reports/static/reports/app/directives/theColumn.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
+ * Contact: beat.support@idiap.ch
+ *
+ * This file is part of the beat.web module of the BEAT platform.
+ *
+ * Commercial License Usage
+ * Licensees holding valid commercial BEAT licenses may use this file in
+ * accordance with the terms contained in a written agreement between you
+ * and Idiap. For further information contact tto@idiap.ch
+ *
+ * Alternatively, this file may be used under the terms of the GNU Affero
+ * Public License version 3 as published by the Free Software and appearing
+ * in the file LICENSE.AGPL included in the packaging of this file.
+ * The BEAT platform is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.
+ *
+ * You should have received a copy of the GNU Affero Public License along
+ * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
+ */
+
+//Directive used to set proper item value in selected column
+angular.module('reportApp').directive("thecolumn",['$compile', function ($compile) {
+
+	return {
+		scope: {
+			thecolumn: "@"
+		},
+		restrict: 'A',
+		template: '{{itemValue}}',
+		controller: ['$scope', function ($scope) {
+
+			var the_parent = $scope.$parent.$parent.$parent.$parent;
+			var report_experiments = $scope.$parent.$parent.$parent.$parent.report_experiments;
+			var report_experiments_alias = $scope.$parent.$parent.$parent.$parent.report_experiments_alias;
+			var floating_point_precision = $scope.$parent.$parent.$parent.$parent.floating_point_precision;
+			var report = $scope.$parent.$parent.$parent.report;
+			var experiment_name = $scope.$parent.item;
+
+			if(jQuery.isEmptyObject(report_experiments) || (report_experiments[experiment_name] == undefined)){
+				return;
+			}
+
+			var analyzer_block = report_experiments[experiment_name].analyzer_block;
+			var report_algorithm_parameters_experiment = $scope.$parent.$parent.$parent.$parent.report_algorithm_parameters_experiment;
+
+			if($scope.thecolumn != "experiment"){
+				if(analyzer_block == undefined){
+					angular.forEach(report_experiments, function(value, key){
+						angular.forEach(value.declaration.analyzers, function(value_analyzer, key_analyzer){
+							if(value_analyzer.algorithm == report.analyzer && (key_analyzer in report_experiments[experiment_name].declaration.analyzers)){
+								report_experiments[experiment_name].analyzer_block = key_analyzer;
+								analyzer_block = report_experiments[experiment_name].analyzer_block;
+							}
+						});
+					});
+				}
+
+				if($scope.thecolumn.indexOf("execution_time.") == 0){
+					//execution time information
+					var block_name = $scope.thecolumn.split("execution_time.")[1].split("[s]")[0];
+					if(Object.keys(report_experiments[experiment_name].execution_info).length === 0){
+						$scope.itemValue = "-";
+					}
+					else{
+						if(report_experiments[experiment_name].execution_info[block_name] == undefined){
+							$scope.itemValue = "-";
+						}
+						else{
+							$scope.itemValue = (report_experiments[experiment_name].execution_info[block_name].linear_execution_time).toFixed(floating_point_precision.selected);;
+						}
+					}
+				}
+				else if($scope.thecolumn.indexOf("experiment.") == 0){
+					//total execution time information
+					var block_name = $scope.thecolumn.split("execution_time.")[1];
+					var total_time = 0;
+					if(Object.keys(report_experiments[experiment_name].execution_info).length === 0){
+						total_time = "-";
+					}
+					else{
+						angular.forEach(report_experiments[experiment_name].execution_info, function(value, key){
+							total_time += value.linear_execution_time;
+						});
+					}
+
+					$scope.itemValue = total_time.toFixed(floating_point_precision.selected);
+				}
+				else if($scope.thecolumn.indexOf("algorithm_parameter.") == 0){
+					//total execution time information
+					var block_name = $scope.thecolumn.split("algorithm_parameter.")[1];
+					var algorithm_name = block_name.split("__")[0];
+					var parameter_name = block_name.split("__")[1];
+					if(report_algorithm_parameters_experiment[experiment_name][algorithm_name] != undefined){
+						var value = "";
+						if(report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name] != undefined){
+							for(var i = 0; i < report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name].length; i++){
+								if(i > 0 && i < report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name].length -1 ){
+									value += ",";
+								}
+								value = report_algorithm_parameters_experiment[experiment_name][algorithm_name][parameter_name][i];
+							}
+						}
+						else if(report["all_experiments"][experiment_name]["declaration"]["globals"][algorithm_name][parameter_name] != undefined){
+							//get globals value
+							value = report["all_experiments"][experiment_name]["declaration"]["globals"][algorithm_name][parameter_name];
+						}
+						else{
+							//nothing is defined
+							value = "-";
+						}
+
+						$scope.itemValue = value;
+					}
+					else{
+						$scope.itemValue = "-";
+					}
+				}
+				else{
+					//results information
+					$scope.itemValue = (report_experiments[experiment_name].results[analyzer_block][$scope.thecolumn].value).toFixed(floating_point_precision.selected);
+				}
+			}
+			else{
+				var experiment_alias = report_experiments_alias[experiment_name];
+				$scope.itemValue = experiment_alias;
+			}
+		}]//,
+		//link: function(scope, element, attrs)
+		//{
+		//  console.log(scope);
+		//  var report_experiments_alias = scope.$parent.$parent.$parent.$parent.report_experiments_alias;
+		//  var experiment_name = scope.$parent.item;
+		//  var experiment_alias = report_experiments_alias[experiment_name];
+		//  scope.$watch(scope.$parent.$parent.$parent.$parent.report_experiments_alias,function(newValue, oldValue)
+		//  {
+		//      console.log("changed");
+		//      console.log(report_experiments_alias);
+		//      console.log(oldValue);
+		//      console.log(newValue);
+		//  });
+		//
+		//}
+	};
+}]);
+
diff --git a/beat/web/reports/static/reports/test/report-spec.js b/beat/web/reports/static/reports/test/report-spec.js
index 93df73d7b..57b186fb6 100644
--- a/beat/web/reports/static/reports/test/report-spec.js
+++ b/beat/web/reports/static/reports/test/report-spec.js
@@ -18,7 +18,7 @@ describe('reports app', function(){
 				console.log(`logs: ${util.inspect(failingLogs)}`);
 			}
 		});
-	})
+	});
 
 	// /reports
 	describe('home', function(){
diff --git a/beat/web/reports/templates/reports/report.html b/beat/web/reports/templates/reports/report.html
index 30a0da96b..a4132f70a 100644
--- a/beat/web/reports/templates/reports/report.html
+++ b/beat/web/reports/templates/reports/report.html
@@ -2,21 +2,21 @@
 {% comment %}
  * Copyright (c) 2016 Idiap Research Institute, http://www.idiap.ch/
  * Contact: beat.support@idiap.ch
- * 
+ *
  * This file is part of the beat.web module of the BEAT platform.
- * 
+ *
  * Commercial License Usage
  * Licensees holding valid commercial BEAT licenses may use this file in
  * accordance with the terms contained in a written agreement between you
  * and Idiap. For further information contact tto@idiap.ch
- * 
+ *
  * Alternatively, this file may be used under the terms of the GNU Affero
  * Public License version 3 as published by the Free Software and appearing
  * in the file LICENSE.AGPL included in the packaging of this file.
  * The BEAT platform is distributed in the hope that it will be useful, but
  * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  * or FITNESS FOR A PARTICULAR PURPOSE.
- * 
+ *
  * You should have received a copy of the GNU Affero Public License along
  * with the BEAT platform. If not, see http://www.gnu.org/licenses/.
 {% endcomment %}
@@ -75,7 +75,27 @@
     <script src="{% fingerprint "reports/app/factories/experimentFactory.js" %}" type="text/javascript" charset="utf-8"></script>
     <script src="{% fingerprint "reports/app/factories/plotterFactory.js" %}" type="text/javascript" charset="utf-8"></script>
     <script src="{% fingerprint "reports/app/factories/dataFactory.js" %}" type="text/javascript" charset="utf-8"></script>
-    <script src="{% fingerprint "reports/app/directives/reportItemView.js" %}" type="text/javascript" charset="utf-8"></script>
+
+    <!-- directives
+    -->
+    <script src="{% fingerprint "reports/app/directives/addReportItem.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/aliasExperiment.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/buttonDeleteItem.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/buttonExportItem.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/buttonSettings.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/item.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/loadedContent.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/lockReport.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/myReportInfo.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/publishReport.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/removeExperiment.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/saveReportItems.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/sortData.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/tableDynamic.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/tablePrecision.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/theColumn.js" %}" type="text/javascript" charset="utf-8"></script>
+
+
     <script src="{% fingerprint "ui/js/smartselector.js" %}" type="text/javascript" charset="utf-8"></script>
     <script src="{% fingerprint "ui/js/multipleselector.js" %}" type="text/javascript" charset="utf-8"></script>
     <script src="{% fingerprint "ui/js/multipleselector_for_report.js" %}" type="text/javascript" charset="utf-8"></script>
-- 
GitLab