From 7a64a965328a6a259ebda794580a6a90a9c816ae Mon Sep 17 00:00:00 2001
From: Nikolaos Triantafyllis <ntriantafyl@cslab.ece.ntua.gr>
Date: Wed, 4 Jan 2023 17:07:35 +0200
Subject: [PATCH] REC-165 Add Accuracy in RSMetrics UI

---
 metric_descriptions/accuracy.yml    |  2 +-
 webservice/app.py                   |  2 +-
 webservice/templates/rsmetrics.html | 48 ++++++++++++++++++++++++-----
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/metric_descriptions/accuracy.yml b/metric_descriptions/accuracy.yml
index 9392719..5b92f19 100644
--- a/metric_descriptions/accuracy.yml
+++ b/metric_descriptions/accuracy.yml
@@ -39,4 +39,4 @@ process:
 # This is optional for visual stylization of the metric when displayed on the report
 style:
     icon: pe-7s-arc
-    color: bg-sunny-morning
+    color: bg-night-sky
diff --git a/webservice/app.py b/webservice/app.py
index 296762f..ad0a458 100644
--- a/webservice/app.py
+++ b/webservice/app.py
@@ -102,7 +102,7 @@ def html_metrics(provider_name):
         result[stat_name] = get_statistic(provider_name, stat_name).get_json()
 
     metrics_needed = ['user_coverage', 'catalog_coverage',
-                      'diversity', 'diversity_gini', 'novelty']
+                      'diversity', 'diversity_gini', 'novelty', 'accuracy']
 
     for metric_name in metrics_needed:
         result[metric_name] = get_metric(provider_name, metric_name).get_json()
diff --git a/webservice/templates/rsmetrics.html b/webservice/templates/rsmetrics.html
index 9a3bb48..1bbe663 100644
--- a/webservice/templates/rsmetrics.html
+++ b/webservice/templates/rsmetrics.html
@@ -484,8 +484,6 @@ <h4>Catalog Coverage
 
                         </div>
                         <!--end col-4-->
-
-
                         <div class="col-md-4">
                             <div class="card  widget-content">
                                 <div class="widget-content-outer">
@@ -536,11 +534,6 @@ <h4>Diversity (Gini Index)
                     <div>&nbsp;</div>
 
 
-
-
-
-
-
                     <div class="row">
                         <div class="col-md-4">
                             <div class="card  widget-content">
@@ -625,7 +618,48 @@ <h4>Novelty
 
                         </div>
                         <!--end col-4-->
+                        <div class="col-md-4">
+                            <div class="card  widget-content">
+                                <div class="widget-content-outer">
+                                    <div class="widget-content-wrapper">
+                                        <div class="widget-content-left">
+                                            <div class="font-icon-wrapper font-icon-lg">
+                                                <i
+                                                    class="{{data.sidebar_info.metric_descriptions.accuracy.style.icon}} icon-gradient {{data.sidebar_info.metric_descriptions.accuracy.style.color}}">
+                                                </i>
+                                            </div>
+                                        </div>
+                                        <div class="widget-content-left">
+                                            <div class="widget-heading">
+                                                <h4>Accuracy
+                                                    <a href="/ui/descriptions/metrics/accuracy?ref={{data.report}}">
+                                                    <span class="font-icon-wrapper font-icon-m" style="border:0">
+                                                        <i class="fa fa-address-card icon-gradient bg-plum-plate"></i>
+                                                    </span>
+                                                    </a>
+                                                </h4>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!--end wrapper-->
+                                    <div class="widget-content-wrapper">
+                                        <div class="widget-content-left">
+                                            <div class="widget-subheading">
+                                                {{data.accuracy.doc}}
+                                            </div>
+                                        </div>
+                                        <div class="widget-content-left">
+                                            <div class="widget-numbers text-success"><span>{{data.accuracy.value}}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <!--end wrapper-->
+                                </div>
+                            </div>
+                            <!--end content-->
 
+                        </div>
+                        <!--end col-4-->
 
                     </div> <!-- row -->
                     <div>&nbsp;</div>