Fix technology filters (#1153)

* Fix technology filters

* Show for comparisons

Author: tunetheweb

src/js/components/filters.js

@@ -58,7 +58,11 @@ class Filters {
 
     /* Modify the URL with the tech */
     url.searchParams.delete('tech');
-    url.searchParams.append('tech', technologies);
+    if (technologies.length > 0) {
+      url.searchParams.append('tech', technologies);
+    } else {
+      url.searchParams.append('tech', 'ALL');
+    }
 
     url.searchParams.delete('geo');
     url.searchParams.append('geo', geo);
@@ -120,7 +124,7 @@ class Filters {
 
     const combo = document.querySelectorAll('[data-component="combobox"]');
     const url = new URL(location.href);
-    const selected = url.searchParams.get('tech')?.split(',') || [];
+    const selected = url.searchParams.get('tech')?.split(',') || ["ALL"];
     combo.forEach(box => new ComboBox(box, this.technologies, selected));
   }
 

static/css/techreport/techreport.css

@@ -1752,6 +1752,11 @@ h2.summary-heading {
   bottom: 1rem;
 }
 
+/* Drilldown shows both clients in timeseries so hide client meta for these */
+[data-component="timeseries"] .meta .drilldown.client {
+  display: none;
+}
+
 /* Chart summary list */
 .data-summary {
   margin-top: 2rem;

templates/techreport/components/filter_meta.html

@@ -1,5 +1,5 @@
 <ul class="meta">
-  <li>
+  <li class="{{ active_page }} client">
     Client: <span data-slot="client">{{ request.args.get('client', '') | capitalize or 'Mobile' }}</span>
   </li>
   <li>
@@ -11,7 +11,8 @@
   {# if only one technology (including ALL), then legend is not shown so add label #}
   {% if ',' not in request.args.get('tech', '') %}
   <li>
-    Technologies: <span data-slot="tech">{{ request.args.get('tech', '')  or 'ALL' }}</span>
+    {% if (request.args.get('tech', '')  or 'ALL') == "ALL" %}Technologies:{% else %}Technology:{% endif %}
+    <span data-slot="tech">{{ request.args.get('tech', '')  or 'ALL' }}</span>
   </li>
   {% endif %}
 </ul>