From c0371ae2161b66b35127d6474d943229455fb595 Mon Sep 17 00:00:00 2001
From: Jaden Diefenbaugh <blakcap@users.noreply.github.com>
Date: Fri, 10 Mar 2017 11:55:58 +0100
Subject: [PATCH] rm viewSerialized func, fix fp precision, clean up ui
---
.../app/directives/groupItemContainer.js | 70 +++++++------------
.../app/directives/groupPanelContent.js | 4 +-
.../reports/app/directives/groupPlotItem.js | 7 +-
.../reports/app/directives/groupTableItem.js | 60 +++++++++++-----
.../reports/app/directives/groupTextItem.js | 7 +-
5 files changed, 76 insertions(+), 72 deletions(-)
diff --git a/beat/web/reports/static/reports/app/directives/groupItemContainer.js b/beat/web/reports/static/reports/app/directives/groupItemContainer.js
index 62cd16e4a..3aed999c4 100644
--- a/beat/web/reports/static/reports/app/directives/groupItemContainer.js
+++ b/beat/web/reports/static/reports/app/directives/groupItemContainer.js
@@ -35,53 +35,33 @@ angular.module('reportApp')
link: function(scope){
scope.item = scope.reportItem;
scope.domId = `${scope.group.name}_${scope.id}`;
- scope.showSerialized = { val: false };
- scope.serializeFuncObj = { val: () => 'UNDEFINED' };
},
template: `
-<div class='row'>
- <div ng-class="{'col-md-6': showSerialized.val, 'col-md-12': !showSerialized.val}">
- <div
- group-table-item
- ng-if="item.id.includes('table')"
- class='panel panel-default'
- group='group'
- id='item.id'
- show-serialized='showSerialized'
- serialize-func-obj='serializeFuncObj'
- content='item.content'
- >
- </div>
- <div
- group-plot-item
- ng-if="item.id.includes('plot')"
- class='panel panel-default'
- group='group'
- id='item.id'
- show-serialized='showSerialized'
- serialize-func-obj='serializeFuncObj'
- content='item.content'
- >
- </div>
- <div
- group-text-item
- ng-if="item.id.includes('text')"
- class='panel panel-default'
- group='group'
- show-serialized='showSerialized'
- serialize-func-obj='serializeFuncObj'
- report-item='item'
- >
- </div>
- </div>
- <div
- group-view-serialized
- ng-if='showSerialized.val'
- class='col-md-6'
- entity='item'
- serialize-func-obj='serializeFuncObj'
- >
- </div>
+<div
+ group-table-item
+ ng-if="item.id.includes('table')"
+ class='panel panel-default'
+ group='group'
+ id='item.id'
+ content='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>
`
};
diff --git a/beat/web/reports/static/reports/app/directives/groupPanelContent.js b/beat/web/reports/static/reports/app/directives/groupPanelContent.js
index c2f6c8b9c..d088c7c1a 100644
--- a/beat/web/reports/static/reports/app/directives/groupPanelContent.js
+++ b/beat/web/reports/static/reports/app/directives/groupPanelContent.js
@@ -39,7 +39,7 @@ angular.module('reportApp').directive("groupPanelContent", ['GroupsService', fun
};
},
template: `
-<div id="{{group.name}}-heading" class="panel-heading" role="tab">
+<div id="{{group.name}}-heading" class="panel-heading" role="tab" style='cursor: grab;'>
<h4 class="panel-title">
<a
class=''
@@ -52,7 +52,7 @@ angular.module('reportApp').directive("groupPanelContent", ['GroupsService', fun
</a>
<span ng-disabled='!isEditable' ng-if='!editingGroupName' ng-click='change()'>
<span>{{ group.name }}</span>
- <span class='glyphicon glyphicon-pencil'></span>
+ <span style='cursor: pointer;' class='glyphicon glyphicon-pencil'></span>
</span>
<form class='form-inline' role='form' style='display: inline;' ng-if='editingGroupName'>
<span class='input-group'>
diff --git a/beat/web/reports/static/reports/app/directives/groupPlotItem.js b/beat/web/reports/static/reports/app/directives/groupPlotItem.js
index dfff0d3aa..cf8d9f513 100644
--- a/beat/web/reports/static/reports/app/directives/groupPlotItem.js
+++ b/beat/web/reports/static/reports/app/directives/groupPlotItem.js
@@ -31,14 +31,13 @@ angular.module('reportApp')
scope: {
group: '=',
id: '=',
- content: '=',
- showSerialized: '='
+ content: '='
},
link: function(scope){
scope.domId = `${scope.group.name}_${scope.id}`;
},
template: `
-<div id="{{domId}}-heading" class="panel-heading" role="tab">
+<div id="{{domId}}-heading" class="panel-heading" role="tab" style='cursor: grab;'>
<h4 class="panel-title">
<a
class=''
@@ -55,9 +54,11 @@ angular.module('reportApp')
<button class='btn btn-default' ng-click='hardRefresh()'>
<span class='glyphicon glyphicon-refresh'></span>
</button>
+ <!--
<button class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
Toggle Serialize View
</button>
+ !-->
</div>
<button class='btn btn-danger' ng-click='group.removeReportItem(id)'>
Delete Plot
diff --git a/beat/web/reports/static/reports/app/directives/groupTableItem.js b/beat/web/reports/static/reports/app/directives/groupTableItem.js
index 0e32a616b..242394089 100644
--- a/beat/web/reports/static/reports/app/directives/groupTableItem.js
+++ b/beat/web/reports/static/reports/app/directives/groupTableItem.js
@@ -31,13 +31,16 @@ angular.module('reportApp')
scope: {
group: '=',
id: '=',
- content: '=',
- showSerialized: '=',
- serializeFuncObj: '='
+ content: '='
},
link: function(scope){
+ // aliases
scope.isEditable = GroupsService.isEditable;
scope.fields = scope.content.fields;
+ // ids
+ scope.domId = `${scope.group.name}_${scope.id}`;
+ scope.colSelectorId = `${scope.domId}_columnSelector`;
+
// 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'){
@@ -47,7 +50,10 @@ angular.module('reportApp')
// 1 - 10
scope.floatingPointRange = [...(new Array(10)).keys()].map(i => i + 1);
+ // get possible table entries
scope.tableables = ExperimentsService.tableables || {};
+
+ // gets the field type (int, float, string, nothing)
scope.getFieldType = (field) => {
if(field === scope.fields[0]){
return 'string';
@@ -71,6 +77,7 @@ angular.module('reportApp')
return type;
};
+ // gets the field val for the given exp
scope.getFieldVal = (expName, field) => {
let fVal = scope.tableables[expName] ?
scope.tableables[expName][field] : undefined;
@@ -79,21 +86,28 @@ angular.module('reportApp')
val = scope.group.aliases[expName].length > 0 ? scope.group.aliases[expName] : expName;
} else if(!fVal){
val = '-';
- } else if(fVal.value){
- let tmp = fVal.value;
- if(Number.isInteger(tmp)){
- val = tmp;
+ } else {
+ let tmp;
+ if(fVal.value){
+ tmp = fVal.value;
} else {
+ tmp = fVal;
+ }
+
+ let type = scope.getFieldType(field);
+ if(type && type.startsWith('float')){
val = tmp.toFixed(parseInt(scope.content.precision));
+ } else {
+ val = tmp;
}
- } else if (fVal){
- val = fVal;
}
return val;
};
+ // init the chosen cols for the table with the saved cols
scope.chosenCols = Array.from(scope.fields);
+ // save new cols choice
scope.saveChosenCols = () => () => {
const newCols = scope.chosenCols
.filter(c => !scope.fields.includes(c));
@@ -109,10 +123,12 @@ angular.module('reportApp')
// need to nest actual value in an obj to get angular
// to watch it correctly
scope.sortField = { val: 'Experiment', isReversed: false };
+ // sort rows (one row per exp)
scope.sortFunc = (expName) => {
return scope.getFieldType(scope.sortField.val) ?
scope.getFieldVal(expName, scope.sortField.val) : expName;
};
+ // sets the new sort field and direction
scope.setSortField = (field) => {
if(scope.sortField.val === field){
scope.sortField.isReversed = !scope.sortField.isReversed;
@@ -122,10 +138,8 @@ angular.module('reportApp')
}
};
- scope.domId = `${scope.group.name}_${scope.id}`;
- scope.colSelectorId = `${scope.domId}_columnSelector`;
-
- scope.serializeFuncObj.val = () => {
+ // a different view of the table
+ scope.getCSV = () => {
let fields = scope.fields;
let exps = scope.group.experiments
// clone arr
@@ -143,13 +157,19 @@ angular.module('reportApp')
.map(e => fields.map(f => `${scope.getFieldVal(e, f)}`).join(','))
.join('\n');
- str = `<pre>${fieldsStr}\n${expsStrs}</pre>`;
+ str = `${fieldsStr}\n${expsStrs}`;
return str;
};
+
+ // toggle val for viewing CSV
+ scope.isViewingCSV = { val: false };
+ scope.toggleViewingCSV = () => {
+ scope.isViewingCSV.val = !scope.isViewingCSV.val;
+ };
},
template: `
-<div id="{{domId}}-heading" class="panel-heading" role="tab">
+<div id="{{domId}}-heading" class="panel-heading" role="tab" style='cursor: grab;'>
<h4 class="panel-title">
<a
class=''
@@ -182,9 +202,14 @@ angular.module('reportApp')
<li ng-click='content.precision = i' ng-repeat='i in floatingPointRange'><a>{{ i }}</a></li>
</ul>
</div>
+ <button class='btn btn-default' ng-click='toggleViewingCSV()'>
+ Toggle CSV View
+ </button>
+ <!--
<button ng-disabled='!isEditable' class='btn btn-default' ng-click='showSerialized.val = !showSerialized.val'>
Toggle CSV View
</button>
+ !-->
</div>
<button ng-disabled='!isEditable' class='btn btn-danger' ng-click='group.removeReportItem(id)'>
Delete Table
@@ -195,7 +220,10 @@ angular.module('reportApp')
class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="{{domId}}-heading">
- <div style='height: 100%; overflow-x: auto;'>
+ <div ng-if='isViewingCSV.val' class='panel-body'>
+ <pre>{{ getCSV() }}</pre>
+ </div>
+ <div ng-if='!isViewingCSV.val' class='panel-body' style='height: 100%; overflow-x: auto;'>
<table class="table table-striped table-hover">
<thead>
<tr ui-sortable ng-model='fields'>
diff --git a/beat/web/reports/static/reports/app/directives/groupTextItem.js b/beat/web/reports/static/reports/app/directives/groupTextItem.js
index a8618117d..d74023bb4 100644
--- a/beat/web/reports/static/reports/app/directives/groupTextItem.js
+++ b/beat/web/reports/static/reports/app/directives/groupTextItem.js
@@ -31,8 +31,6 @@ angular.module('reportApp')
scope: {
group: '=',
reportItem: '=',
- showSerialized: '=',
- serializeFuncObj: '='
},
link: function(scope){
// aliases
@@ -55,9 +53,6 @@ angular.module('reportApp')
// handle compiling content
scope.compiledContent = { val: '' };
- scope.serializeFuncObj.val = () => {
- return scope.compiledContent.val;
- };
scope.compileContent = () => {
GroupsService.compileRST(scope.item.content)
.then(data => {
@@ -85,7 +80,7 @@ angular.module('reportApp')
scope.compileContent();
},
template: `
-<div id="{{domId}}-heading" class="panel-heading" role="tab">
+<div id="{{domId}}-heading" class="panel-heading" role="tab" style='cursor: grab;'>
<h4 class="panel-title">
<a
class=''
--
GitLab