add group* directives to render groups, reportItems, exp lists, alias lists

beat/web/reports/static/reports/app/directives/groupAddItemsMenu.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupAddItemsMenu
+ * Desc:
+ * 	represents the menu for adding report items to a group
+ */
+angular.module('reportApp')
+.directive("groupAddItemsMenu", ['ExperimentsService', 'GroupsService', function(ExperimentsService, GroupsService){
+	return {
+		scope: {
+			group: '='
+		},
+		link: function(scope){
+			const getNextItemId = (type) => {
+				let count = Object.values(scope.group.reportItems)
+				.filter(v => v.id.includes(type))
+				.length
+				;
+				let nextId = `${type}_${count}`;
+				return nextId;
+			};
+
+			scope.plottables = ExperimentsService.plottables;
+
+			// use the data sub-obj to hold the selected fields
+			// to keep twoway binding
+			scope.newTable = { data: [] };
+
+			scope.addNewTable = function() {
+				return () => {
+					let id = getNextItemId('table');
+					scope.group.addReportItem(id, Array.from(scope.newTable.data));
+					scope.newTable.data.length = 0;
+				};
+			};
+
+			scope.addNewPlot = (content) => {
+				let id = getNextItemId('plot');
+				scope.group.addReportItem(id, content);
+			};
+
+			scope.addNewText = () => {
+				let id = getNextItemId('text');
+				scope.group.addReportItem(id, '');
+			};
+
+			scope.tableFieldSelectorId = `${scope.group.name}_newTableDropdownToggle`;
+		},
+		template: `
+<div class="btn-group" role="group">
+	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		Add Plot
+		<span class="caret"></span>
+	</button>
+	<ul class='dropdown-menu' ng-repeat='(expName, plots) in plottables' ng-if='expName === group.experiments[0]'>
+		<li ng-repeat='plot in plots'>
+			<a href='#' ng-click='addNewPlot(plot.type)'>{{ plot.type }}</a>
+		</li>
+	</ul>
+</div>
+<div class="btn-group" role="group"
+	group-table-field-selector
+	id='tableFieldSelectorId'
+	group='group'
+	cols-selected='newTable.data'
+	button-action='addNewTable()'
+	title="Add Table"
+	button-text="Add Table"
+	>
+</div>
+<div class="btn-group" role="group">
+	<button
+		ng-click='addNewText()'
+		type="button"
+		class="btn btn-default"
+		>
+		Add Text Block
+	</button>
+</div>
+`
+	}
+}]);

beat/web/reports/static/reports/app/directives/groupItemContainer.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupItemContainer
+ * Desc:
+ * 	container for an item in the group
+ */
+angular.module('reportApp')
+.directive("groupItemContainer", [function(){
+	return {
+		scope: {
+			group: '=',
+			reportItem: '='
+		},
+		link: function(scope){
+			scope.item = scope.reportItem;
+			scope.domId = `${scope.group.name}_${scope.id}`;
+		},
+		template: `
+<div
+	group-table-item
+	ng-if="item.id.includes('table')"
+	class='panel panel-default'
+	group='group'
+	id='item.id'
+	fields='item.content'
+	>
+</div>
+<div
+	group-plot-item
+	ng-if="item.id.includes('plot')"
+	class='panel panel-default'
+	group='group'
+	id='item.id'
+	content='item.content'
+	>
+</div>
+<div
+	group-text-item
+	ng-if="item.id.includes('text')"
+	class='panel panel-default'
+	group='group'
+	report-item='item'
+	>
+</div>
+`
+	}
+}]);

beat/web/reports/static/reports/app/directives/groupPanelAliases.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupPanelAliases
+ * Desc:
+ * 	displays & manages the aliases of the group
+ */
+angular.module('reportApp').directive("groupPanelAliases", [function(){
+	return {
+		scope: {
+			group: '='
+		},
+		link: function(scope){
+		},
+		template: `
+<div id="{{group.name}}-aliaslist-heading" class="panel-heading" role="tab">
+	<h4 class="panel-title">
+		<a
+			class=''
+			role="button"
+			data-toggle="collapse"
+			data-parent="#{{group.name}}-aliaslist-heading"
+			href="#collapse-{{group.name}}-aliaslist"
+			aria-expanded="true"
+			aria-controls="collapse-{{group.name}}-aliaslist">
+			Aliases
+		</a>
+	</h4>
+</div>
+<div id="collapse-{{group.name}}-aliaslist"
+	class="panel-collapse collapse in"
+	role="tabpanel"
+	aria-labelledby="{{group.name}}-aliaslist-heading">
+	<table class="table table-striped table-hover">
+		<thead>
+			<tr>
+				<th>Experiment</th>
+				<th>Alias</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr ng-repeat='(expName, alias) in group.aliases'>
+				<td>{{ expName }}</td>
+				<td><input ng-model='group.aliases[expName]'></input></td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+`
+	}
+}]);

beat/web/reports/static/reports/app/directives/groupPanelContent.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupPanelContent
+ * Desc:
+ * 	lays out the content of a group in a panel
+ */
+angular.module('reportApp').directive("groupPanelContent", ['GroupsService', function(GroupsService){
+	return {
+		scope: {
+			group: '='
+		},
+		link: function(scope){
+			scope.deleteGroup = GroupsService.deleteGroup;
+		},
+		template: `
+<div id="{{group.name}}-heading" class="panel-heading" role="tab">
+	<h4 class="panel-title">
+		<a
+			class=''
+			role="button"
+			data-toggle="collapse"
+			data-parent="#{{group.name}}-heading"
+			href="#collapse-{{group.name}}"
+			aria-expanded="true"
+			aria-controls="collapse-{{group.name}}">
+			{{ group.name }}
+		</a>
+		<div class='btn-group'>
+			<button class='btn btn-danger' ng-click='deleteGroup(group.name)'>Delete Group</button>
+		</div>
+	</h4>
+</div>
+<div id="collapse-{{group.name}}"
+	class="panel-collapse collapse in"
+	role="tabpanel"
+	aria-labelledby="{{group.name}}-heading">
+	<div class="panel-body panel-group">
+		<i ng-if='group.analyzer.length > 0'>Analyzer: {{ group.analyzer }}</i>
+		<div group-panel-experiments group='group' class='panel panel-default'></div>
+		<div ng-if='group.experiments.length > 0' group-panel-aliases group='group' class='panel panel-default'></div>
+		<div ng-if='group.experiments.length > 0' group-panel-items group='group' class='panel panel-default'></div>
+	</div>
+</div>
+`
+	}
+}]);
+

beat/web/reports/static/reports/app/directives/groupPanelExperiments.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupPanelExperiments
+ * Desc:
+ * 	displays the experiments panel of the group
+ */
+angular.module('reportApp').directive("groupPanelExperiments", ['ExperimentsService', function(ExperimentsService){
+	return {
+		scope: {
+			group: '='
+		},
+		link: function(scope){
+			scope.dropdownId = `${scope.group.name}_exp_add_dropdown`;
+			scope.expsNotInGroup = () => {
+				return Object.keys(ExperimentsService.experiments)
+				// exps not in group
+				.filter(e => !scope.group.experiments.includes(e))
+				// exp has compatible analyzer
+				.filter(e => scope.group.analyzer === '' || ExperimentsService.getAnalyzerFromExpName(e) === scope.group.analyzer)
+				;
+			};
+			scope.getAnalyzerFromExpName = ExperimentsService.getAnalyzerFromExpName;
+		},
+		template: `
+<div id="{{group.name}}-explist-heading" class="panel-heading" role="tab">
+	<h4 class="panel-title">
+		<a
+			class=''
+			role="button"
+			data-toggle="collapse"
+			data-parent="#{{group.name}}-explist-heading"
+			href="#collapse-{{group.name}}-explist"
+			aria-expanded="true"
+			aria-controls="collapse-{{group.name}}-explist">
+			Experiments
+		</a>
+		<div class='btn-group'>
+		<div class="dropdown">
+			<button class="btn btn-default dropdown-toggle" ng-class='{disabled: expsNotInGroup().length === 0}' type="button" id="{{ dropdownId }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+				Add Experiment
+				<span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu" aria-labelledby="{{ dropdownId }}">
+				<li
+					ng-repeat='exp in expsNotInGroup()'
+					ng-click='group.addExperiment(exp, getAnalyzerFromExpName(exp))'>
+					<a href="#">{{ exp }}</a>
+				</li>
+			</ul>
+		</div>
+		</div>
+	</h4>
+</div>
+<div id="collapse-{{group.name}}-explist"
+	class="panel-collapse collapse in"
+	role="tabpanel"
+	aria-labelledby="{{group.name}}-explist-heading">
+	<div class="panel-body">
+		<ul class='list-group'>
+			<li class='list-group-item' ng-repeat='exp in group.experiments'>
+				<button class="btn btn-danger" aria-hidden="true" ng-click='group.removeExperiment(exp)'>Remove</button>
+				<span>{{ exp }}</span>
+			</li>
+		</ul>
+	</div>
+</div>
+`
+	}
+}]);

beat/web/reports/static/reports/app/directives/groupPanelItems.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupPanelItems
+ * Desc:
+ * 	displays the panel of report items of the group
+ */
+angular.module('reportApp').directive("groupPanelItems", [function(){
+	return {
+		scope: {
+			group: '='
+		},
+		link: function(scope){
+		},
+		template: `
+<div id="{{group.name}}-itemlist-heading" class="panel-heading" role="tab">
+	<h4 class="panel-title">
+		<a
+			class=''
+			role="button"
+			data-toggle="collapse"
+			data-parent="#{{group.name}}-itemlist-heading"
+			href="#collapse-{{group.name}}-itemlist"
+			aria-expanded="true"
+			aria-controls="collapse-{{group.name}}-itemlist">
+			Items
+		</a>
+		<div
+			group-add-items-menu
+			class="btn-group" role="group" role='tab'
+			group='group'
+		></div>
+	</h4>
+</div>
+<div id="collapse-{{group.name}}-itemlist"
+	class="panel-collapse collapse in"
+	role="tabpanel"
+	aria-labelledby="{{group.name}}-itemlist-heading">
+	<div class="panel-body">
+		<div class='panel-group'>
+			<div
+				group-item-container
+				ng-repeat='item in group._reportItems'
+				group='group'
+				report-item='item'
+				style='margin-bottom: 5px;'
+				>
+			</div>
+		</div>
+	</div>
+</div>
+`
+	}
+}]);

beat/web/reports/static/reports/app/directives/groupPlotItem.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupPlotItem
+ * Desc:
+ * 	displays a plot report item
+ */
+angular.module('reportApp')
+.directive("groupPlotItem", ['ExperimentsService', function(ExperimentsService){
+	return {
+		scope: {
+			group: '=',
+			id: '=',
+			content: '='
+		},
+		link: function(scope){
+			scope.domId = `${scope.group.name}_${scope.id}`;
+		},
+		template: `
+<div id="{{domId}}-heading" class="panel-heading" role="tab">
+	<h4 class="panel-title">
+		<a
+			class=''
+			role="button"
+			data-toggle="collapse"
+			data-parent="#{{domId}}-heading"
+			href="#collapse-{{domId}}"
+			aria-expanded="true"
+			aria-controls="collapse-{{domId}}">
+			{{ domId }}
+		</a>
+
+		<div class="btn-group" role="group" role='tab'>
+			<button class='btn btn-default' ng-click='hardRefresh()'>
+				<span class='glyphicon glyphicon-refresh'></span>
+			</button>
+			<button class='btn btn-danger' ng-click='group.removeReportItem(id)'>
+				Delete Plot
+			</button
+		</div>
+	</h4>
+</div>
+<div id="collapse-{{domId}}"
+	class="panel-collapse collapse in"
+	role="tabpanel"
+	aria-labelledby="{{domId}}-heading">
+	{{ id }} content
+</div>
+`
+	}
+}]);

beat/web/reports/static/reports/app/directives/groupTableFieldSelector.js

+/*
+ * 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/.
+ */
+
+/*
+ * GroupTableFieldSelector
+ * Desc:
+ * 	Handles the choosing of table columns
+ */
+angular.module('reportApp')
+.directive("groupTableFieldSelector", ['ExperimentsService', function(ExperimentsService){
+	return {
+		scope: {
+			id: '=',
+			group: '=',
+			colsSelected: '=',
+			buttonAction: '&',
+			title: '@',
+			buttonText: '@'
+		},
+		link: function(scope){
+			// bootstrap's auto dropdown toggling is disabled for the table creation dropdown
+			// add a click handler for the table creation dropdown submit button to toggle
+			// manually
+			scope.clickButton = (e) => {
+				$(`#${scope.id}`).dropdown('toggle');
+				scope.buttonAction()();
+			};
+
+			scope.tableables = () => {
+				const tableables = ExperimentsService.tableables;
+				const fieldArr = Object.entries(tableables)
+				.filter(([e, fields]) => scope.group.experiments.includes(e))
+				.map(([e, fields]) => Object.keys(fields))
+				.reduce((arr, fArr) => [...arr, ...fArr], [])
+				;
+
+				return Array.from(new Set(fieldArr));
+			};
+
+			scope.isUniqueTableable = (expName, fieldName) => {
+				const tableables = ExperimentsService.tableables;
+				const concatNames = (eName, fName) => `${eName}.${fName}`;
+
+				const isRepeat = Object.entries(tableables)
+				.filter(([e, fields]) => {
+					let isInGroup = scope.group.experiments.includes(e);
+					let alreadyChecked = Object.keys(tableables).indexOf(e) < Object.keys(tableables).indexOf(expName);
+					return isInGroup && alreadyChecked;
+				})
+				.map(([e, fields]) => Object.keys(fields))
+				.reduce((arr, fArr) => [...arr, ...fArr], [])
+				.includes(fieldName)
+				;
+
+				return !isRepeat;
+			};
+
+			console.log(scope.buttonText);
+		},
+		template: `
+<button id='{{ id }}' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	{{ title }}
+	<span class="caret"></span>
+</button>
+<div class='dropdown-menu' ng-click="$event.stopPropagation();">
+	<h4>Select columns to show in Table</h4>
+	<select multiple ng-model='colsSelected'>
+		<option ng-repeat='fName in tableables()' ng-if='isUniqueTableable(fName)'>{{ fName }}</option>
+	</select>
+	<button class='btn btn-default' ng-click='clickButton($event)'>{{ buttonText }}</button>
+</div>
+`
+	}
+}]);

beat/web/reports/static/reports/app/directives/groupTableItem.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupTableItem
+ * Desc:
+ * 	displays a table report item
+ */
+angular.module('reportApp')
+.directive("groupTableItem", ['ExperimentsService', function(ExperimentsService){
+	return {
+		scope: {
+			group: '=',
+			id: '=',
+			fields: '='
+		},
+		link: function(scope){
+			// add 'expName' to the beginning of the fields to show in the table
+			// if it isnt already there
+			if(scope.fields.length === 0 || scope.fields[0] !== 'Experiment'){
+				scope.fields.unshift('Experiment');
+			}
+
+			console.log(scope.fields);
+			scope.tableables = ExperimentsService.tableables || {};
+			scope.getFieldType = (field) => {
+				if(field === scope.fields[0]){
+					return 'string';
+				}
+
+				let hasFieldObj = Object.values(scope.tableables)
+				.find(o => o[field]);
+				let fVal = hasFieldObj ? hasFieldObj[field] : {};
+				let type;
+				if(fVal.type){
+					type = fVal.type;
+				} else if(Number.isSafeInteger(fVal)){
+					type = 'integer';
+				} else if(Number.isFinite(fVal)){
+					type = 'float';
+				} else if(typeof fVal === 'string'){
+					type = 'string';
+				} else {
+					type = undefined;
+				}
+
+				return type
+			};
+			scope.getFieldVal = (expName, field) => {
+				let fVal = scope.tableables[expName] ?
+					scope.tableables[expName][field] : undefined;
+				let val;
+				if(field === scope.fields[0]){
+					val = scope.group.aliases[expName].length > 0 ? scope.group.aliases[expName] : expName;
+				} else if(fVal.value){
+					val = fVal.value;
+				} else if (fVal){
+					val = fVal;
+				} else {
+					val = '-';
+				}
+
+				return val;
+			};
+
+			scope.chosenCols = Array.from(scope.fields);
+			scope.saveChosenCols = () => () => {
+				scope.fields.length = 1;
+				scope.chosenCols.forEach(f => scope.fields.push(f));
+			};
+
+			// need to nest actual value in an obj to get angular
+			// to watch it correctly
+			scope.sortField = { val: 'Experiment', isReversed: false };
+			scope.sortFunc = (expName) => {
+				return scope.getFieldType(scope.sortField.val) ?
+					scope.getFieldVal(expName, scope.sortField.val) : expName;
+			};
+			scope.setSortField = (field) => {
+				if(scope.sortField.val === field){
+					scope.sortField.isReversed = !scope.sortField.isReversed;
+				} else {
+					scope.sortField.val = field;
+					scope.sortField.isReversed = false;
+				}
+			};
+
+			scope.domId = `${scope.group.name}_${scope.id}`;
+			scope.colSelectorId = `${scope.domId}_columnSelector`;
+		},
+		template: `
+<div id="{{domId}}-heading" class="panel-heading" role="tab">
+	<h4 class="panel-title">
+		<a
+			class=''
+			role="button"
+			data-toggle="collapse"
+			data-parent="#{{domId}}-heading"
+			href="#collapse-{{domId}}"
+			aria-expanded="true"
+			aria-controls="collapse-{{domId}}">
+			{{ domId }}
+		</a>
+
+		<div class="btn-group" role="group" role='tab'>
+			<button class='btn btn-default' ng-click='hardRefresh()'>
+				<span class='glyphicon glyphicon-refresh'></span>
+			</button>
+			<div class="btn-group" role="group"
+				group-table-field-selector
+				id='colSelectorId'
+				group='group'
+				cols-selected='chosenCols'
+				button-action='saveChosenCols()'
+				title="Choose Columns"
+				button-text="Save Column Choices"
+				>
+			</div>
+		</div>
+		<button class='btn btn-danger' ng-click='group.removeReportItem(id)'>
+			Delete Table
+		</button
+	</h4>
+</div>
+<div id="collapse-{{domId}}"
+	class="panel-collapse collapse in"
+	role="tabpanel"
+	aria-labelledby="{{domId}}-heading">
+	<div style='height: 100%; overflow-x: auto;'>
+		<table class="table table-striped table-hover">
+			<thead>
+				<tr>
+					<th ng-repeat='field in fields'>
+						<span
+							ng-if="sortField.val == field"
+							class='glyphicon'
+							ng-class="{
+								'glyphicon-chevron-up': sortField.isReversed,
+								'glyphicon-chevron-down': !sortField.isReversed
+								}"
+							>
+						</span>
+						<a role='button' ng-click='setSortField(field)'>
+							{{ field }} <i>({{ getFieldType(field) }})</i>
+						</a>
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="exp in group.experiments | orderBy:sortFunc:sortField.isReversed">
+					<td ng-repeat='field in fields'>
+						{{ tableables[exp] ? getFieldVal(exp, field) : '' }}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+`
+	}
+}]);

beat/web/reports/static/reports/app/directives/groupTextItem.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupTextItem
+ * Desc:
+ * 	displays a plot report item
+ */
+angular.module('reportApp')
+.directive("groupTextItem", [function(){
+	return {
+		scope: {
+			group: '=',
+			reportItem: '='
+		},
+		link: function(scope){
+			scope.item = scope.reportItem;
+			scope.domId = `${scope.group.name}_${scope.item.id}`;
+			const editorOptions = {
+				debug: 'info',
+				modules: {
+					toolbar: [
+						[{ header: [1, 2, false] }],
+						['bold', 'italic', 'underline'],
+						['image', 'code-block']
+					]
+				},
+				theme: 'snow'
+			};
+
+			// the text editor
+			scope.editor;
+			scope.hasUnsavedContent = { val: false, change () { this.val = true; } };
+
+			let setupEditor = (el) => {
+				scope.editor = new Quill(el, editorOptions);
+				if(typeof scope.item.content === 'object'){
+					scope.editor.setContents(scope.item.content);
+				}
+				scope.editor.on('text-change', (newDelta) => {
+					scope.hasUnsavedContent.change();
+					console.log(scope.hasUnsavedContent);
+				});
+			};
+
+			let editorId = `${scope.domId}-text-editor`;
+			scope.$watch(() => document.querySelector(`#${editorId}`),
+				(oldEl, newEl) => {
+					if(newEl){
+						setupEditor(newEl);
+					}
+				}
+			);
+
+			scope.saveContent = () => {
+				let newContent = scope.editor.getContents();
+				scope.hasUnsavedContent.val = false;
+				scope.item.content = newContent;
+			};
+		},
+		template: `
+<div id="{{domId}}-heading" class="panel-heading" role="tab">
+	<h4 class="panel-title">
+		<a
+			class=''
+			role="button"
+			data-toggle="collapse"
+			data-parent="#{{domId}}-heading"
+			href="#collapse-{{domId}}"
+			aria-expanded="true"
+			aria-controls="collapse-{{domId}}">
+			{{ domId }}
+		</a>
+		<button class='btn btn-success' ng-click='saveContent()'>
+			Save Content
+		</button>
+
+		<div class="btn-group" role="group" role='tab'>
+			<button class='btn btn-danger' ng-click='group.removeReportItem(item.id)'>
+				Delete Text Block
+			</button
+		</div>
+	<div ng-if='hasUnsavedContent.val'>
+		<strong>Warning:</strong> Press the 'Save Content' button to save changes.
+	</div>
+	</h4>
+</div>
+<div id="collapse-{{domId}}"
+	class="panel-collapse collapse in"
+	role="tabpanel"
+	aria-labelledby="{{domId}}-heading">
+	<div id='{{domId}}-text-editor'></div>
+</div>
+`
+	};
+}]);

beat/web/reports/static/reports/app/directives/groupsLayout.js

+/*
+ * 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/.
+ */
+
+/*
+ * groupsLayout
+ * Desc:
+ * 	controls the layout of the reports content, generating group panels
+ * 	using the GroupsService data.
+ */
+angular.module('reportApp').directive("groupsLayout", ['GroupsService', function(GroupsService){
+	return {
+		// isolate scope for modularity & less coupling
+		scope: {
+		},
+		link: function(scope, el, attr){
+			scope.groups = GroupsService.groups;
+		},
+		template: `
+<div id='groupsLayout' class='panel-group'>
+	<div
+		ng-if='true || groups.length > 1'
+		group-panel-content
+		class='panel panel-default'
+		ng-repeat='group in groups track by $index'
+		group='group'
+		>
+	</div>
+	<!--
+	<div
+		group-table-item
+		ng-if='groups.length == 1'
+		class='panel panel-default'
+		ng-repeat='table in groups[0]._reportItems'
+		group='groups[0]'
+		id='table.id'
+		fields='table.content'
+		>
+	</div>
+	!-->
+</div>
+`
+	}
+}]);

beat/web/reports/templates/reports/report.html

@@ -42,6 +42,8 @@
     <link rel="stylesheet" href="{% fingerprint "chosen-bootstrap/chosen.bootstrap.min.css" %}" type="text/css" media="screen" />
     <link rel="stylesheet" href="{% fingerprint "datatables/media/css/dataTables.bootstrap.min.css" %}" type="text/css" media="screen" />
     <link rel="stylesheet" href="{% fingerprint "jquery-ui/themes/base/minified/jquery-ui.min.css" %}" type="text/css" media="screen" />
+    <link href="//cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
+    <link href="//cdn.quilljs.com/1.2.2/quill.bubble.css" rel="stylesheet">
     {% code_editor_css %}
 {% endblock %}
 
@@ -53,6 +55,7 @@
     <script src="{% fingerprint "chosen/chosen.jquery.min.js" %}" type="text/javascript" charset="utf-8"></script>
     <script src="{% fingerprint "datatables/media/js/jquery.dataTables.min.js" %}" type="text/javascript" charset="utf-8"></script>
     <script src="{% fingerprint "datatables/media/js/dataTables.bootstrap.min.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="//cdn.quilljs.com/1.2.2/quill.min.js"></script>
 
     <!-- Use Google's CDN for angular-js with a local fallback -->
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
@@ -83,6 +86,7 @@
 
     <!-- services -->
     <script src="{% fingerprint "reports/app/services/groupsService.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/services/experimentsService.js" %}" type="text/javascript" charset="utf-8"></script>
 
     <!-- directives
     -->
@@ -102,6 +106,17 @@
     <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 "reports/app/directives/groupsLayout.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupPanelContent.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupPanelExperiments.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupPanelItems.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupAddItemsMenu.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupItemContainer.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupTableItem.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupPlotItem.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupTextItem.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupTableFieldSelector.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script src="{% fingerprint "reports/app/directives/groupPanelAliases.js" %}" type="text/javascript" charset="utf-8"></script>
 
 
     <script src="{% fingerprint "ui/js/smartselector.js" %}" type="text/javascript" charset="utf-8"></script>