add basic UI & frontend logic/state for exp groups

beat/web/reports/static/reports/app/controllers/groupsController.js

@@ -23,5 +23,25 @@
 angular.module('reportApp').controller('GroupsController', ['$scope', 'ReportService', function ($scope, ReportService){
 	let vm = this;
 
+	// testing stuffs
+	ReportService.createGroup('great');
+	ReportService.addExperimentToGroup('exp1', 'great');
 	vm.test = 'test';
+
+	// ReportService stuff to be used directly in ui
+	vm.groups = ReportService.groups;
+	vm.removeExperimentFromGroup = ReportService.removeExperimentFromGroup;
+	vm.addExperimentToGroup = ReportService.addExperimentToGroup;
+	vm.createGroup = function(name) {
+		ReportService.createGroup(name);
+		vm.newGroupName = '';
+	}
+	vm.deleteGroup = ReportService.deleteGroup;
+
+	// createGroup input val
+	vm.newGroupName = '';
+	// report's experiments
+	vm.experiments = $scope.report_experiments;
+
+	console.log(vm);
 }]);

beat/web/reports/static/reports/app/controllers/reportController.js

@@ -130,7 +130,9 @@ angular.module('reportApp').controller('reportController',['$scope', 'reportFact
 	function getExperimentDataReportNumber(report_number){
 		experimentFactory.getAllExperimentResults($scope.url_prefix, report_number)
 		.then(function (experiments){
-			$scope.report_experiments = experiments;
+			Object.entries(experiments).forEach(([name, exp]) => {
+				$scope.report_experiments[name] = exp;
+			});
 			$scope.report.all_experiments = experiments;
 			var experiment_aliases = Object.keys(experiments);
 			for(var i = 0; i < experiment_aliases.length; i++){
@@ -173,7 +175,9 @@ angular.module('reportApp').controller('reportController',['$scope', 'reportFact
 	function getExperimentDataForAuthor(all_experiments){
 		experimentFactory.getAllExperimentResultsForAuthor($scope.user, $scope.report_id, $scope.url_prefix)
 		.then(function (experiments){
-			$scope.report_experiments = experiments;
+			Object.entries(experiments).forEach(([name, exp]) => {
+				$scope.report_experiments[name] = exp;
+			});
 			$scope.report.all_experiments = experiments;
 			var experiment_aliases = Object.keys(experiments);
 			for(var i = 0; i < experiment_aliases.length; i++){

beat/web/reports/static/reports/app/services/reportService.js

@@ -36,7 +36,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 	// has a name and a list of experiments that belong to it
 	class Group {
 		constructor (name) {
-			this.name = name;
+			this._name = name;
 			this.experimentNames = new Set();
 		}
 
@@ -47,7 +47,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 
 		// get the group name
 		get name () {
-			return this.name;
+			return this._name;
 		}
 
 		// check if an exp is in this group
@@ -67,7 +67,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 	};
 
 	// gets groups
-	reportServiceInstance.groups = () => groupData.map(g => g.name);
+	reportServiceInstance.groups = groupData;
 
 	// create a new group for the report
 	// returns false if it already exists
@@ -87,7 +87,10 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 
 	// delete a group
 	reportServiceInstance.deleteGroup = (name) => {
-		groupData = groupData.filter(g => g.name !== name);
+		let idx = groupData.indexOf(groupData.find(g => g.name === name));
+		if (idx > -1) {
+			groupData.splice(idx, 1);
+		}
 	};
 
 	// fetch group info from the api
@@ -129,7 +132,7 @@ angular.module('reportApp').factory('ReportService', ['$http', function($http){
 
 	// helper to assert that a group exists
 	function checkForGroup (groupName) {
-		if(!reportServiceInstance.groups().includes(groupName)){
+		if(!groupData.find(g => g.name === groupName)){
 			throw new Error(`Could not find group "${JSON.stringify(groupName)}"`);
 		}
 	}

beat/web/reports/templates/reports/panels/viewer.html

@@ -64,8 +64,56 @@
 					class="panel-collapse collapse{% if not owner %} in{% endif %}"
 					role="tabpanel"
 					aria-labelledby="groups-heading">
-					<div class="panel-body">
-						{$ groups.test $}
+					<div class="panel-body panel-group">
+						<div class='row'>
+							<div class='col-lg-6'>
+								<div class="input-group">
+									<span class="input-group-btn">
+										<button ng-click='groups.createGroup(groups.newGroupName)' class="btn btn-default" type="button">Create</button>
+									</span>
+									<input ng-model='groups.newGroupName' type="text" class="form-control" placeholder="Group name...">
+								</div>
+							</div>
+						</div>
+						<div ng-repeat='group in groups.groups' class='panel panel-default'>
+							<div class='panel-heading'>
+								<h4 class='panel-title'>{$ group.name $}</h4>
+							</div>
+							<div class='panel-body'>
+								<button
+									class='btn btn-danger'
+									ng-click='groups.deleteGroup(group.name)'>
+									Delete Group
+								</button>
+								<div class="dropdown pull-left">
+									<button
+										class="btn btn-default dropdown-toggle"
+										type="button"
+										id="dropdownMenu1"
+										data-toggle="dropdown"
+										aria-haspopup="true"
+										aria-expanded="true">
+										Add Experiment To Group
+										<span class="caret"></span>
+									</button>
+									<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+										<li ng-click='groups.addExperimentToGroup(expName, group.name)'  ng-repeat='(expName, exp) in groups.experiments'>
+											<a href='#'>{$ expName $}</a>
+										</li>
+									</ul>
+								</div>
+								<ul class='list-group' style='margin-top: 1em'>
+									<li class='list-group-item' ng-repeat='expName in group.experiments'>
+										{$ expName $}
+										<button
+											class='btn btn-danger'
+											ng-click='groups.removeExperimentFromGroup(expName, group.name)'>
+											Remove Experiment
+										</button>
+									</li>
+								</ul>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>