From 327c2a03f60c7482600e7436747e96085651f4f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez?= <ansan12a@upv.es>
Date: Tue, 16 Sep 2025 12:57:26 +0200
Subject: [PATCH] Fixed dq label table visualisation on narrow screens and
 added report URL for every metric in the DQ&U assessment scores table

---
 webapp/templates/dataset_label.html | 45 ++++++++++++++++++-----------
 webapp/views.py                     |  1 +
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/webapp/templates/dataset_label.html b/webapp/templates/dataset_label.html
index c23485b..1e1aaad 100644
--- a/webapp/templates/dataset_label.html
+++ b/webapp/templates/dataset_label.html
@@ -66,7 +66,9 @@ <h1 class="text-center mt-3" style="margin-bottom: 20px;">QUANTUM label</h1>
                             </ul>
                         </li>
 
-                        <li><b>Color Gradient</b>: The base color of each category is assigned uniquely, while the dimensions inherit the same base color with varying opacity based on their score. As the score increases, the opacity of the color increases, making the slice more visible.</li>
+                        <li><b>Color Gradient</b>: The base color of each category is assigned uniquely, while the dimensions inherit the same base color with varying opacity based on their score. As the score increases, the opacity of the color increases,
+                            making the slice more visible.
+                        </li>
                         <li><b>Stars & Score in Center</b>: The chart center displays the total DQ&U score and a star rating:
                             <ul>
                                 <li>★☆☆☆☆ = 25% of DQ&U reached</li>
@@ -113,14 +115,14 @@ <h4>Dataset information</h4>
             </div>
 
             {% if assessment_percentage == 100 %}
-                <h5 class="text-success text-center"><b>This label shows a completed quality assessment.</b></h5>
+            <h5 class="text-success text-center"><b>This label shows a completed quality assessment.</b></h5>
             {% else %}
-                <h5 class="text-warning text-center"><b>This is an ongoing evaluation; the displayed quality label is not final.</b></h5>
+            <h5 class="text-warning text-center"><b>This is an ongoing evaluation; the displayed quality label is not final.</b></h5>
             {% endif %}
 
 
             <div class="progress-container mb-2">
-                 <div class="progress text-center opacity-75 mx-5" role="progressbar">
+                <div class="progress text-center opacity-75 mx-5" role="progressbar">
                     <div id="progress" class="progress-bar bg-warning" style="width: 0%"></div>
                 </div>
             </div>
@@ -148,7 +150,7 @@ <h5 class="text-warning text-center"><b>This is an ongoing evaluation; the displ
             });
 
             </script>
-        </div> 
+        </div>
 
         <div class="col-md-2 col-sm-12"></div>
         <div class="col-md-8 col-sm-12">
@@ -317,25 +319,25 @@ <h2>
             </div>
 
             <div class="row mt-3">
-                <div class="col-sm-3">
+                <div class="col-3">
                     <b>
                         EHDS
                         <span class="question-mark" data-bs-toggle="tooltip" title="European Health Data Space Categories grouping different dimensions." style="cursor: pointer;">?</span>
                     </b>
                 </div>
-                <div class="col-sm-3">
+                <div class="col-3">
                     <b>
                         Dimension
                         <span class="question-mark" data-bs-toggle="tooltip" title="Click on the dimension name for more information." style="cursor: pointer;">?</span>
                     </b>
                 </div>
-                <div class="col-sm-3">
+                <div class="col-3">
                     <b>
                         Dim. weight
                         <span class="question-mark" data-bs-toggle="tooltip" title="This represents the weight of the dimension in the overall quality and utility score calculation." style="cursor: pointer;">?</span>
                     </b>
                 </div>
-                <div class="col-sm-3">
+                <div class="col-3">
                     <b>
                         Dim. score
                         <span class="question-mark" data-bs-toggle="tooltip" title="This represents the score of the dimension in the overall quality and utility score calculation." style="cursor: pointer;">?</span>
@@ -363,9 +365,9 @@ <h2>
 
             {% for dimension in category.dimensions %}
             <div class="row">
-                <div class="col-sm-3">
+                <div class="col-3">
                 </div>
-                <div class="col-sm-3">
+                <div class="col-3">
                     <a href="#" data-bs-toggle="modal" data-bs-target="#modal_{{ category.id }}_{{ dimension.id }}">
                         {{ dimension.name }}
                     </a>
@@ -407,6 +409,15 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">
                                             <br>
                                             {{ metric.answer }}
                                         </p>
+                                        <p>
+                                            <b>Report URL</b>
+                                            <br>
+                                            {% if metric.report_URL %}
+                                            <a href="{{ metric.report_URL }}">{{ metric.report_URL }}</a>
+                                            {% else %}
+                                            No report URL available
+                                            {% endif %}
+                                        </p>
                                         <hr>
                                     </div>
                                     {% endfor %}
@@ -418,10 +429,10 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">
                         </div>
                     </div>
                 </div>
-                <div class="col-sm-3">
+                <div class="col-3">
                     {{ dimension.relevance|floatformat:2 }} %
                 </div>
-                <div class="col-sm-3">
+                <div class="col-3">
                     {{ dimension.score|floatformat:2 }}
                 </div>
             </div>
@@ -430,13 +441,13 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">
 
             <div class="mt-5">
                 <div class="row">
-                    <div class="col-sm-6 text-end">
+                    <div class="col-6 text-end">
                         <a href="{% url 'dataset_assessment_rdf' %}?id={{ dataset_id }}">
                             <button type="button" class="btn btn-success">Download RDF label</button>
                         </a>
                     </div>
 
-                    <div class="col-sm-6 text-start">
+                    <div class="col-6 text-start">
                         <a href="{% url 'dataset_assessment_pdf' %}?id={{ dataset_id }}">
                             <button type="button" class="btn btn-success">Download PDF</button>
                         </a>
@@ -445,13 +456,13 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">
             </div>
             <div class="mt-3">
                 <div class="row">
-                    <div class="col-sm-6 text-end">
+                    <div class="col-6 text-end">
                         <a href="{% url 'dashboard' %}">
                             <button type="button" class="btn btn-primary">Go to DQ&U Dashboard</button>
                         </a>
                     </div>
 
-                    <div class="col-sm-6 text-start">
+                    <div class="col-6 text-start">
                         <a href="{% url 'dataset_assessment' %}?id={{dataset_id}}">
                             <button type="button" class="btn btn-primary">Go to DQ&U Assessment</button>
                         </a>
diff --git a/webapp/views.py b/webapp/views.py
index 0a76ca0..036c989 100644
--- a/webapp/views.py
+++ b/webapp/views.py
@@ -1112,6 +1112,7 @@ def dataset_label_view(request: HttpRequest) -> HttpResponse:
                     metric_score = 0
 
                     if len(dq_metric_value) >= 1:
+                        results[-1]['dimensions'][-1]['metrics'][-1]['report_URL'] = dq_metric_value.first().report_URL
                         current_value = str(dq_metric_value.first().value)
 
                     if getattr(metric, 'dqcategoricalmetric') is not None: