slim down groups controller & ui

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

@@ -36,45 +36,14 @@ angular.module('reportApp').controller('GroupsController', ['$scope', 'GroupsSer
 
 	// GroupsService stuff to be used directly in ui
 	vm.groups = GroupsService.groups;
-	vm.removeExperimentFromGroup = GroupsService.removeExperimentFromGroup;
-	vm.addExperimentToGroup = (expName, groupName) => {
-		let analyzer = getAnalyzerFromExpName(expName);
-		GroupsService.addExperimentToGroup(expName, groupName);
-		GroupsService.groups.find(g => g.name === groupName).analyzer = analyzer;
-	};
 
 	vm.createGroup = function(name) {
 		GroupsService.createGroup(name);
 		vm.newGroupName = '';
 	};
-	vm.deleteGroup = GroupsService.deleteGroup;
 
 	// createGroup input val
 	vm.newGroupName = '';
-	// report's experiments
-	vm.experiments = $scope.report_experiments;
-	// same analyzer
-	vm.compatibleExperiments = (analyzer) => {
-		if(!vm.report.all_experiments){
-			return {};
-		}
-
-		return Object.entries(vm.report.all_experiments)
-		.filter(([eName, e]) => analyzer === '' || getAnalyzerFromExpName(eName) === analyzer)
-		.reduce((o, [eName, e]) => Object.assign(o, { [eName]: e }), {});
-	};
-
-	// a group panel's classes
-	// one panel is the active group ('panel-success')
-	vm.classArr = (groupName) => {
-		let a = ['panel', groupName === GroupsService.activeGroup ? 'panel-success' : 'panel-default'];
-		return a;
-	};
-
-	// set active group
-	vm.setActiveGroup = (groupName) => {
-		GroupsService.activeGroup = groupName;
-	};
 
 	console.log(vm);
 }]);

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

@@ -45,93 +45,6 @@
 				</div>{# collapse #}
 			</div>{# panel #}
 
-			{# GROUPS DISPLAY/EDITOR #}
-			<div id='groups' class='panel panel-default' ng-controller='GroupsController as groupsCtrl'>
-				<div id="groups-heading" class="panel-heading" role="tab">
-					<h4 class="panel-title">
-						<a
-							{% if owner %}class="collapsed" {%endif%}
-							role="button"
-							data-toggle="collapse"
-							data-parent="#groups-heading"
-							href="#collapse-groups"
-							aria-expanded="{% if owner %}false{% else %}true{% endif %}"
-							aria-controls="collapse-groups">
-							Groups
-						</a>
-					</h4>
-				</div>
-				<div id="collapse-groups"
-					class="panel-collapse collapse{% if not owner %} in{% endif %}"
-					role="tabpanel"
-					aria-labelledby="groups-heading">
-					<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='groupsCtrl.createGroup(groupsCtrl.newGroupName)' class="btn btn-default" type="button">Create</button>
-									</span>
-									<input ng-model='groupsCtrl.newGroupName' type="text" class="form-control" placeholder="Group name...">
-								</div>
-							</div>
-						</div>
-						<div ng-repeat='group in groupsCtrl.groups track by $index' ng-class='groupsCtrl.classArr(group.name)'>
-							<div class='panel-heading'>
-								<h4 class='panel-title'>{$ group.name $}</h4>
-							</div>
-							<div class='panel-body'>
-								<button
-									class='btn btn-success'
-									ng-click='groupsCtrl.setActiveGroup(group.name)'>
-									Set as Active Group
-								</button>
-								<button
-									class='btn btn-danger'
-									ng-click='groupsCtrl.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='groupsCtrl.addExperimentToGroup(expName, group.name)'  ng-repeat='(expName, exp) in groupsCtrl.compatibleExperiments(group.analyzer)'>
-											<a href='#'>{$ expName $}</a>
-										</li>
-									</ul>
-								</div>
-								<p>Group Analyzer: {$ group.analyzer $}</p>
-								<p>Saved Report Items Associated to Group</p>
-								<ul class='list-group' style='margin-top: 1em'>
-									<li class='list-group-item' ng-repeat='id in group.reportItemIds'>
-										{$ id $}
-									</li>
-								</ul>
-								<p>Experiments in Group</p>
-								<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='groupsCtrl.removeExperimentFromGroup(expName, group.name)'>
-											Remove Experiment
-										</button>
-									</li>
-								</ul>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
 			{% if status != 'Locked' %}
 			<div class="panel panel-default" ng-if="report.experiments.length != 0" >
 				<div class="panel-heading" role="tab" id="info-heading">
@@ -142,6 +55,13 @@
 				<div id="collapse-info" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="info-heading">
 					<div class="panel-body">
 						<myreportinfo urlprefix={{URL_PREFIX}}></myreportinfo>
+
+						<div ng-controller='GroupsController as groupsCtrl' class="input-group">
+							<span class="input-group-btn">
+								<button ng-click='groupsCtrl.createGroup(groupsCtrl.newGroupName)' class="btn btn-default" type="button">Create</button>
+							</span>
+							<input ng-model='groupsCtrl.newGroupName' type="text" class="form-control" placeholder="Group name...">
+						</div>
 					</div>{# panel-body #}
 				</div>{# collapse #}
 			</div>{# panel #}
@@ -159,6 +79,8 @@
 		<div class="panel-group" id="space-for-report-items" role="tablist" aria-multiselectable="true">
 		</div>
 
+		<groups-layout></groups-layout>
+
 	</div>{# col-sm-12 #}
 </div>{# row #}
 {% endwith %}