Improve visualization of evaluations

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

Change-Id: Ie5c3a715f9fa5fe570e2b9e0ad48ad923be65058

meteos_ui/static/dashboard/machine_learning/model_evaluations/details/drawer.html

@@ -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>

meteos_ui/static/dashboard/machine_learning/model_evaluations/model_evaluations.module.js

@@ -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;
+        }
       }
     }