Highlight missing fields in CSV preview

digitalmethodsinitiative · Feb 4, 2025 · dd2ab72 · dd2ab72
1 parent 204ab8a
commit dd2ab72
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/webtool/static/css/dataset-page.css b/webtool/static/css/dataset-page.css
@@ -625,6 +625,25 @@ body.csv-preview table tr:nth-child(2n+1) {
     background: var(--contrast-bright);
 }
 
+.colour-preview i {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border: 1px solid var(--gray-dark);
+    position: relative;
+    top: -0.1em;
+    vertical-align: bottom;
+}
+
+body.csv-preview .missing-field {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAElBMVEXu7u7v7O3z3uf11eP4y978wNnbft+uAAAARElEQVQY09XJUQmAQBQAwRUrGMASRrDAwfav4seDg43g5zAAwKWqa3S8w/sXSZPkSfIhKcnhzuFOSUpSkpKUpCQlKUk/jndCArsTDbwAAAAASUVORK5CYII=');
+    background-attachment: fixed;
+}
+
+body.csv-preview .missing-field:hover {
+    outline: 1px solid var(--accent);
+}
+
 .child.focus:not(.card) > .sub-controls > .query-result > .query-result-iframe {
 	display: none;
 }

diff --git a/webtool/templates/preview/csv.html b/webtool/templates/preview/csv.html
@@ -2,6 +2,8 @@
 <head>
     <title>Tabulated preview - {{ dataset.get_results_path().name }}</title>
 	<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/stylesheet.css')}}">
+	<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.6.3.min.js')}}"></script>
+    <script src="{{url_for('static', filename='js/fourcat.js')}}"></script>
 </head>
 <body class="csv-preview">
 {% if dataset.num_rows > max_items %}
@@ -12,18 +14,27 @@
     {% for row in rows %}
         {% set outer_loop = loop %}
         <tr>
-        {% for cell in row %}
+        {% for column, cell in row.items() %}
             {% set inner_loop = loop %}
             {% if outer_loop.index == 1 %}
                 {% if "link" in cell or "url" in cell %}
                     {% set ns.links = ns.links + [inner_loop.index] %}
                 {% endif %}
             {% endif %}
-            <t{% if outer_loop.index == 1 %}h{% else %}d{% endif %}>
-                {{ cell|e|add_ahref(ellipsiate=50)|safe }}
+            <t{% if outer_loop.index == 1 %}h{% else %}d{% endif %}
+                    {% if column == "missing_fields" %} class="missing-field-meta tooltip-trigger" aria-controls="tooltip-missing-field-explainer"
+                    {% elif column in row.missing_fields %} class="missing-field tooltip-trigger" aria-controls="tooltip-missing-field"{% endif %}
+            >
+                {{ cell|e|add_ahref(ellipsiate=50)|add_colour|safe }}
             </t{% if outer_loop.index == 1 %}h{% else %}d{% endif %}>
         {% endfor %}
         </tr>
     {% endfor %}
 </table>
+
+<p role="tooltip" class="multiple" id="tooltip-missing-field-explainer" aria-hidden="true">These columns were not
+    available in the source data, but may be available when visiting the source directly or when collecting the data
+    with a different method.</p>
+<p role="tooltip" class="multiple" id="tooltip-missing-field" aria-hidden="true">This field is missing from the source
+    data and has been filled with a default value, or left empty.</p>
 </body>
diff --git a/webtool/views/views_dataset.py b/webtool/views/views_dataset.py
@@ -327,9 +327,9 @@ def preview_items(key):
                     break
 
                 if len(rows) == 0:
-                    rows.append(list(row.keys()))
+                    rows.append({k: k for k in list(row.keys())})
 
-                rows.append(list(row.values()))
+                rows.append(row)
 
         except NotImplementedError:
             return error(404)