x/meteos-ui
Code Issues Proposed changes

Improve visualization of evaluations

Browse Source 
Currently, result of evaluation shows up as a text.
Improve the visualization using table tag.

Change-Id: Ie5c3a715f9fa5fe570e2b9e0ad48ad923be65058
This commit is contained in:
Hiroyuki Eguchi 2017-04-05 13:42:52 +09:00
parent aa6fe37f23
commit c5cfa10ade
2 changed files with 69 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
meteos_ui/static/dashboard/machine_learning/model_evaluations/details/drawer.html
View File

@ -7,4 +7,39 @@
</dl>
</span>
</div>
<div class="row">
<span class="rsp-alt-p3">
<dl class="col-md-4">
<dt translate>Result</dt>
<table class="table">
<tr ng-repeat="(key,value) in item.result">
<td>{$ key $}</td>
<td>{$ value $}</td>
</tr>
</table>
</dl>
</span>
</div>
<div class="row"
ng-if="item.matrix">
<span class="rsp-alt-p3">
<dl class="col-md-4">
<dt translate>Confusion Matrix</dt>
<table border=2>
<tr ng-repeat="(key,values) in item.matrix track by $index">
<td height="50">{$ key $}</td>
<td ng-repeat="value in values track by $index">
{$ value $}
</td>
</tr>
<tr>
<td></td>
<td ng-repeat="(key,values) in item.matrix track by $index">
{$ key $}
</td>
</tr>
</table>
</dl>
</span>
</div>
</div>

48
meteos_ui/static/dashboard/machine_learning/model_evaluations/model_evaluations.module.js
View File

@ -76,9 +76,6 @@
.setProperty('source_dataset_url', {
label: gettext('Source Dataset URL')
})
.setProperty('stdout', {
label: gettext('Result')
})
.setListFunction(listFunction)
.tableColumns
.append({
@ -108,10 +105,6 @@
id: 'source_dataset_url',
priority: 2
})
.append({
id: 'stdout',
priority: 2
})
// for magic-search
registry.getResourceType(resourceType).filterFacets
.append({
@ -138,23 +131,50 @@
'label': gettext('Source Dataset URL'),
'name': 'source_dataset_url',
'singleton': true
})
.append({
'label': gettext('Result'),
'name': 'stdout',
'singleton': true
});
function listFunction(params) {
return meteos.getModelEvaluations(params).then(modifyResponse);
function modifyResponse(response) {
return {data: {items: response.data.items.map(addTrackBy)}};
return {data: {items: response.data.items.map(parseItems)}};
function addTrackBy(item) {
function parseItems(item) {
item.trackBy = item.id;
if (item.stdout) {
item.result = angular.fromJson(item.stdout.replace(/'/g, '"'));
if (item.result.Matrix) {
item.matrix = createMatrix(item.result.Matrix);
delete item.result["Matrix"];
}
}
return item;
}
function sum(i) {
return i.reduce(function(x, y) { return x + y; });
}
function createMatrix(matrix){
var table = [];
var row = [];
var sum_row;
angular.forEach(matrix, function(record, i) {
sum_row = sum(record);
angular.forEach(record, function(num, i) {
row[i] = num + ' (' + Math.round(num/sum_row*1000)/10 + '%)';
});
table[i] = row.concat();
});
return table;
}
}
}