Merge branch 'main' into replace-bleach-with-nh3

frontend/shared/components/DataTable/index.js

@@ -25,31 +25,24 @@ class DataTable extends React.Component {
             }, 1000);
         }
     }
-    renderTable() {
-        const rows = this.props.dataset,
-            {tableId} = this.state,
-            columns = _.map(rows[0], (val, key) => key),
-            renderers = this.props.renderers || {};
+    renderTable(data, columns) {
+        const {tableId} = this.state;
 
         return (
             <table id={tableId} className="table table-striped table-sm">
                 <thead>
                     <tr>
                         {columns.map((col, i) => {
-                            return <th key={i}>{h.titleCase(col)}</th>;
+                            return <th key={i}>{col.title}</th>;
                         })}
                     </tr>
                 </thead>
                 <tbody>
-                    {rows.map((row, i) => {
+                    {data.map((row, i) => {
                         return (
                             <tr key={i}>
                                 {columns.map((col, j) => {
-                                    return (
-                                        <td key={j}>
-                                            {renderers[col] ? renderers[col](row) : row[col]}
-                                        </td>
-                                    );
+                                    return <td key={j}>{row[col.data]}</td>;
                                 })}
                             </tr>
                         );
@@ -59,11 +52,21 @@ class DataTable extends React.Component {
         );
     }
     render() {
-        const {datatables} = this.props;
+        const {dataset, renderers, datatables} = this.props,
+            // apply renderers to dataset
+            data = dataset.map(row =>
+                _.mapValues(row, (val, key, obj) => (renderers[key] ? renderers[key](obj) : val))
+            ),
+            // setup columns for use in datatables
+            columns = _.map(data[0], (val, key) => ({data: key, title: h.titleCase(key)}));
         return datatables ? (
-            <DataTableWrapper>{this.renderTable()}</DataTableWrapper>
+            <DataTableWrapper
+                className="table table-striped table-sm"
+                data={data}
+                columns={columns}
+            />
         ) : (
-            this.renderTable()
+            this.renderTable(data, columns)
         );
     }
 }
@@ -74,6 +77,7 @@ DataTable.propTypes = {
     datatables: PropTypes.bool,
 };
 DataTable.defaultProps = {
+    renderers: {},
     tablesort: true,
     datatables: false,
 };

frontend/shared/components/DataTableWrapper.js

@@ -1,19 +1,42 @@
 import $ from "jquery";
 import PropTypes from "prop-types";
-import React, {createRef, useEffect} from "react";
+import React, {createRef, useEffect, useState} from "react";
+import Loading from "shared/components/Loading";
+
+const DataTableWrapper = ({children, className, data, columns}) => {
+    const ref = createRef(),
+        [loading, setLoading] = useState(true),
+        dtProps = {autoWidth: false, order: [], pageLength: 10};
+
+    // check that either children or data exist
+    if (children) {
+        // do nothing
+    } else if (data && columns) {
+        dtProps.data = data;
+        dtProps.columns = columns;
+    } else {
+        console.error("Invalid props passed to DataTableWrapper");
+    }
 
-const DataTableWrapper = ({children}) => {
-    const ref = createRef();
     $.DataTable = require("datatables.net");
     useEffect(() => {
-        const table = $(ref.current.firstElementChild).DataTable({order: [], pageLength: 10});
+        const table = $(ref.current.firstElementChild).DataTable(dtProps);
+        setLoading(false);
         return () => table.destroy();
     });
-    return <div ref={ref}>{children}</div>;
+    return (
+        <>
+            {loading ? <Loading /> : null}
+            <div ref={ref}>{children ? children : <table className={className}></table>}</div>
+        </>
+    );
 };
 
 DataTableWrapper.propTypes = {
     children: PropTypes.node,
+    className: PropTypes.string,
+    data: PropTypes.array,
+    columns: PropTypes.array,
 };
 
 export default DataTableWrapper;

frontend/shared/startup.js

@@ -61,11 +61,34 @@ const setupAjax = document => {
                 })
                 .removeClass("hidden");
         }
+    },
+    setupHtmx = function() {
+        document.body.addEventListener("htmx:afterRequest", function(evt) {
+            const errorBanner = document.getElementById("htmx-error-banner"),
+                errorAlert = document.getElementById("htmx-alert");
+            if (evt.detail.successful) {
+                // Successful request, clear out alert
+                errorBanner.setAttribute("hidden", "true");
+                errorAlert.innerText = "";
+            } else if (evt.detail.failed && evt.detail.xhr) {
+                // Server error with response contents, equivalent to htmx:responseError
+                console.error("Server error", evt.detail);
+                const xhr = evt.detail.xhr;
+                errorAlert.innerText = `Error ${xhr.status}: ${xhr.statusText}`;
+                errorBanner.removeAttribute("hidden");
+            } else {
+                // Unspecified failure, usually caused by network error
+                console.error("Unexpected htmx error", evt.detail);
+                errorAlert.innerText = "Server error";
+                errorBanner.removeAttribute("hidden");
+            }
+        });
     };
 
 $(document).ready(() => {
     setupAjax(document);
     tryWebAppStartup();
     checkSession();
     debugStartup();
+    setupHtmx();
 });

frontend/shared/utils/HAWCUtils.js

@@ -15,7 +15,7 @@ class HAWCUtils {
     static booleanCheckbox(value) {
         return value
             ? `<i class="fa fa-check"><span class="invisible">${value}</span></i>`
-            : `<i class="fa fa-minus"><span class="invisible">${value}</span></i>`;
+            : `<i class="fa fa-times"><span class="invisible">${value}</span></i>`;
     }
 
     static newWindowPopupLink(triggeringLink) {

hawc/apps/lit/filterset.py

@@ -1,4 +1,5 @@
 import django_filters as df
+from django.contrib.postgres.aggregates import ArrayAgg
 from django.db.models import Count, F, Q, Value
 from django.forms.widgets import CheckboxInput
 from django_filters import FilterSet
@@ -225,24 +226,21 @@ def filter_tag_additions(self, queryset, name, value):
         if not value:
             return queryset
         include_descendants = self.data.get("include_additiontag_descendants", False)
+        queryset = queryset.annotate(consensus_tags=ArrayAgg("tags", distinct=True))
         for tag in value:
             queryset = queryset.annotate(addtag_count=Value(0))
             tag_ids = (
                 list(tag.get_tree(parent=tag).values_list("id", flat=True))
                 if include_descendants
                 else [tag.id]
             )
-            for tag_id in tag_ids:
-                queryset = queryset.annotate(
-                    addtag_count=F("addtag_count")
-                    + Count(
-                        "user_tags",
-                        filter=Q(user_tags__is_resolved=False)
-                        & Q(user_tags__tags=tag_id)
-                        & ~Q(tags=tag_id),
-                    )
+            queryset = queryset.annotate(
+                added_tags=ArrayAgg(
+                    "user_tags__tags__id",
+                    distinct=True,
+                    filter=Q(user_tags__is_resolved=False) & Q(user_tags__tags__in=tag_ids),
                 )
-            queryset = queryset.filter(addtag_count__gt=0)
+            ).filter(Q(added_tags__isnull=False) & ~Q(consensus_tags__contains=F("added_tags")))
         return queryset.distinct()
 
     def filter_tag_deletions(self, queryset, name, value):

hawc/apps/lit/templates/lit/overview.html

@@ -9,8 +9,8 @@ <h2>Literature Review</h2>
         {% if obj_perms.edit_assessment %}
           <a class="dropdown-item" href="{{assessment.literature_settings.get_update_url}}">Update settings</a>
           <a class="dropdown-item" href="{% url 'lit:tags_update' assessment.pk %}">Update tags</a>
-          <a class="dropdown-item" href="{% url 'lit:workflows' assessment.pk %}">View Workflows</a>
         {% endif %}
+        <a class="dropdown-item" href="{% url 'lit:workflows' assessment.pk %}">View Workflows</a>
         <div class="dropdown-divider"></div>
         <span class="dropdown-header">Searches and Imports</span>
         <a class="dropdown-item" href="{% url 'lit:search_new' assessment.pk %}">New search</a>

hawc/static/css/epa-hawc.css

@@ -26,6 +26,11 @@
     -webkit-mask: url(/static/vendor/uswds/3.1.0/img/usa-icons/expand_more.svg) no-repeat center/contain;
 }
 
+/* EPA header */
+.usa-nav--epa .menu__link:hover {
+    color: white !important;
+}
+
 /* Top nav */
 .hawc-header .navbar-toggler {
     color: initial;

hawc/templates/base.html

@@ -73,6 +73,7 @@
               {% block breadcrumbs_outer %}{% endblock breadcrumbs_outer %}
 
               {% include "includes/messages.html" %}
+              {% include "includes/htmx_alert.html" %}
               {% if UA_SUPPORTED is False %}
                 {% include "includes/unsupported_browser.html" %}
               {% endif %}

hawc/templates/includes/htmx_alert.html

@@ -0,0 +1,6 @@
+<div id="htmx-error-banner" hidden class="row px-3">
+    <div class="col-12 alert alert-danger" role="alert">
+        <h4 id="htmx-alert" class="alert-heading"></h4>
+        <span>Please check your network connection and refresh this page. Please <a href="{% url 'contact' %}">contact us</a> if the issue contiues to occur.</span>
+    </div>
+</div>