Browse Source

Improve visualization of evaluations

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

Change-Id: Ie5c3a715f9fa5fe570e2b9e0ad48ad923be65058
Hiroyuki Eguchi 2 years ago
parent
commit
c5cfa10ade

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

@@ -7,4 +7,39 @@
7 7
       </dl>
8 8
     </span>
9 9
   </div>
10
+  <div class="row">
11
+    <span class="rsp-alt-p3">
12
+      <dl class="col-md-4">
13
+        <dt translate>Result</dt>
14
+        <table class="table">
15
+          <tr ng-repeat="(key,value) in item.result">
16
+            <td>{$ key $}</td>
17
+            <td>{$ value $}</td>
18
+          </tr>
19
+        </table>
20
+      </dl>
21
+    </span>
22
+  </div>
23
+  <div class="row"
24
+       ng-if="item.matrix">
25
+    <span class="rsp-alt-p3">
26
+      <dl class="col-md-4">
27
+        <dt translate>Confusion Matrix</dt>
28
+        <table border=2>
29
+          <tr ng-repeat="(key,values) in item.matrix track by $index">
30
+          <td height="50">{$ key $}</td>
31
+          <td ng-repeat="value in values track by $index">
32
+            {$ value $}
33
+          </td>
34
+          </tr>
35
+          <tr>
36
+          <td></td>
37
+          <td ng-repeat="(key,values) in item.matrix track by $index">
38
+            {$ key $}
39
+          </td>
40
+          </tr>
41
+        </table>
42
+      </dl>
43
+    </span>
44
+  </div>
10 45
 </div>

+ 34
- 14
meteos_ui/static/dashboard/machine_learning/model_evaluations/model_evaluations.module.js View File

@@ -76,9 +76,6 @@
76 76
     .setProperty('source_dataset_url', {
77 77
       label: gettext('Source Dataset URL')
78 78
     })
79
-    .setProperty('stdout', {
80
-      label: gettext('Result')
81
-    })
82 79
     .setListFunction(listFunction)
83 80
     .tableColumns
84 81
     .append({
@@ -108,10 +105,6 @@
108 105
       id: 'source_dataset_url',
109 106
       priority: 2
110 107
     })
111
-    .append({
112
-      id: 'stdout',
113
-      priority: 2
114
-    })
115 108
     // for magic-search
116 109
     registry.getResourceType(resourceType).filterFacets
117 110
     .append({
@@ -138,23 +131,50 @@
138 131
       'label': gettext('Source Dataset URL'),
139 132
       'name': 'source_dataset_url',
140 133
       'singleton': true
141
-    })
142
-    .append({
143
-      'label': gettext('Result'),
144
-      'name': 'stdout',
145
-      'singleton': true
146 134
     });
147 135
 
148 136
     function listFunction(params) {
149 137
       return meteos.getModelEvaluations(params).then(modifyResponse);
150 138
 
151 139
       function modifyResponse(response) {
152
-        return {data: {items: response.data.items.map(addTrackBy)}};
140
+        return {data: {items: response.data.items.map(parseItems)}};
153 141
 
154
-        function addTrackBy(item) {
142
+        function parseItems(item) {
155 143
           item.trackBy = item.id;
144
+
145
+          if (item.stdout) {
146
+            item.result = angular.fromJson(item.stdout.replace(/'/g, '"'));
147
+
148
+            if (item.result.Matrix) {
149
+              item.matrix = createMatrix(item.result.Matrix);
150
+              delete item.result["Matrix"];
151
+            }
152
+          }
156 153
           return item;
157 154
         }
155
+
156
+        function sum(i) {
157
+          return i.reduce(function(x, y) { return x + y; });
158
+        }
159
+
160
+        function createMatrix(matrix){
161
+
162
+          var table = [];
163
+          var row = [];
164
+          var sum_row;
165
+
166
+          angular.forEach(matrix, function(record, i) {
167
+            sum_row = sum(record);
168
+
169
+            angular.forEach(record, function(num, i) {
170
+              row[i] = num + ' (' + Math.round(num/sum_row*1000)/10 + '%)';
171
+            });
172
+
173
+            table[i] = row.concat();
174
+          });
175
+
176
+          return table;
177
+        }
158 178
       }
159 179
     }
160 180
 

Loading…
Cancel
Save