Category dashboard with collapsible filters #934

sarahfossheim · 2024-09-24T08:30:20Z

New features

New compact header only used on the tech report pages
Sidebar with filters, instead of big card on top of the page
Prototype of the categories page:
- Table with summarising info on all techs within that category
- Possibility to click through to a specific tech, or compare multiple (or all) technologies within the tech
- Prototype sortable table functionality (not in the UI yet)
- /reports/techreport/category
Only one view for both drilldown and comparison view
- Add more technologies to compare in the sidebar
- New template loads depending on the amount of techs selected
- See /reports/techreport/tech

Bugfixes

Updates to the responsiveness/zoom (more improvements to come in future PR)
Debugging bright yellow for WordPress line changed to color with enough contrast
Updated copywriting for some section (more improvements to come in future PR)
Fixed keyboard order for the points on comparison graphs (it was reversed)

src/js/components/filters.js

src/js/techreport/index.js

…r, minor bugfixes

src/js/components/filters.js

…shboard' into cwvtech-category-dashboard

rviscomi

Staged here and left a bunch of feedback: https://technology-report-dot-httparchive.uk.r.appspot.com/reports/techreport/category?geo=ALL&rank=ALL&category=CMS

I had to patch one bug to get it to work (the fix is in one of the comment suggestions) but otherwise these are all just feature requests. Great work!

rviscomi · 2024-12-18T01:54:26Z

src/js/techreport/tableLinked.js

+          const bLatest = bSortedDate[0];
+
+          // Get the correct endpoint & metric
+          const aMetric = aLatest[sortEndpoint].find(row => row.name === sortMetric);


I'm getting an error on this line:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'adoption')

rviscomi · 2024-12-18T01:54:58Z

src/js/techreport/tableLinked.js

+
+      console.log(sortMetric);
+      if(sortMetric) {
+        this.dataArray = this.dataArray.sort((techA, techB) => {


I was able to work around the error below by filtering out empty arrays before sorting. Not sure if it's the best fix though.

Suggested change

this.dataArray = this.dataArray.sort((techA, techB) => {

this.dataArray = this.dataArray.filter(tech => tech.length).sort((techA, techB) => {

rviscomi · 2024-12-18T01:59:46Z

config/techreport.json

+                "type": "heading"
+              },
+              {
+                "key": "origins",


Values appear as 3222201 which can be harder to read. Could we format with commas, ie 3,222,201? It'd also be helpful for comparing values if the text in this column is right-aligned, like a spreadsheet.

rviscomi · 2024-12-18T02:03:47Z

src/js/techreport/tableLinked.js

+      const sortKey = component.dataset.sortKey;
+      const client = component.dataset.client;
+
+      console.log(sortMetric);


Suggested change

console.log(sortMetric);

rviscomi · 2024-12-18T02:08:26Z

src/js/techreport/tableLinked.js

+        });
+      }
+
+      this.dataArray.forEach(technology => {


I know we talked about pagination before, but I don't remember if we talked about performance improvements to the initial API requests.

So for example if we only want to show the top 10 technologies by default and we can assume that the categories API endpoint lists the technologies in descending popularity order, we could make requests to the other API endpoints with only those first 10 technologies as request params to improve performance a bit.

rviscomi · 2024-12-18T02:28:35Z

config/techreport.json

+                "type": "heading"
+              },
+              {
+                "key": "origins",


When filtering to the top 1k rank, I'm seeing technologies with "null" origin counts

https://technology-report-dot-httparchive.uk.r.appspot.com/reports/techreport/category?tech=&geo=ALL&rank=Top+1k&category=CMS

rviscomi · 2024-12-18T02:37:03Z

src/js/techreport/tableLinked.js

+          // Sort techs by date to get the latest
+          const aSortedDate = techA.sort((a, b) => new Date(b.date) - new Date(a.date));
+          const bSortedDate = techB.sort((a, b) => new Date(b.date) - new Date(a.date));
+          const aLatest = aSortedDate[0];
+          const bLatest = bSortedDate[0];


"Latest" should be the same for all technologies. It's possible for a technology to exist at one point in the dataset and then disappear forever, but this would always compare that ancient technology against the latest versions of all other modern technologies.

For example, October CMS shows up at the top of the top 1k CMS list with 361 origins:

https://technology-report-dot-httparchive.uk.r.appspot.com/reports/techreport/category?tech=&geo=ALL&rank=Top+1k&category=CMS

But in the technology drilldown it's clearer that the most recent (and only) data point is from April 2022:

https://technology-report-dot-httparchive.uk.r.appspot.com/reports/techreport/tech?tech=October%20CMS&geo=ALL&rank=Top%201k

The expected behavior is for it to not appear on the Category page at all since it's not part of the latest dataset. That might also be a good reason to explicitly have a label like Latest data: 2024-11-01 at the top of this report, similar to the others.

rviscomi · 2024-12-18T02:41:53Z

templates/techreport/templates/selector_tech.html

@@ -1,18 +1,18 @@
 <div class="tech-selector-group" data-tech="{{ name }}">
  <div class="content">
-    <div class="categories-selector-group">
+    <!-- <div class="categories-selector-group">


This HTML is commented out. Should it be removed?

rviscomi · 2024-12-18T02:46:28Z

templates/techreport/category.html

+        <label for="categories_selector" class="tech">Category</label>
+        <div class="tech-input-wrapper">
+          {% set category_selected = tech_report_page.filters.category or tech_report_config.default_category %}
+          <select name="categories" class="tech" data-selected="{{ category_selected }}" id="categories_selector">


I'm finding the native<select>hard to use for such long lists of options. Do you have any thoughts on using a datalist instead? I like having the ability to start typing what I'm looking for and it can match any position in the value, whereas typing in a <select> only works if it's a prefix match, and the datalist also filters down the results to make it easier to find what you're looking for.

Here's a production example: https://chromestatus.com/metrics/feature/popularity

Maybe something to consider for the technologies inputs too.

rviscomi · 2024-12-18T02:51:39Z

templates/techreport/category.html

+      {% set table = component.table %}
+      {% include "techreport/components/table_linked.html" %}
+
+      <a data-name="selected-apps" href="/reports/techreport/tech" class="cta-link">Compare technologies</a>


If there are geo/rank/client filters set on the Categories page and I click this to compare multiple technologies, it looks like those settings are lost on the comparison page.

USA, Top 100k, Desktop:

All, All, mobile:

sarahfossheim added 9 commits August 28, 2024 02:03

custom techreport header

d3987bf

add prototype categories page

b21cc6e

add filters in sidebar and change page based on amount of techs

04628eb

add new nav and filter structure (wip

07171f7

responsive filters prototype

c312252

wip: add collapsible filter sidebar

706d6f0

fix bug with double close button

fa8c689

add aria

e58f7ce

merge in master

7f837c1

github-advanced-security bot found potential problems Sep 25, 2024

View reviewed changes

src/js/components/filters.js Fixed Show fixed Hide fixed

src/js/techreport/index.js Fixed Show fixed Hide fixed

rviscomi marked this pull request as draft October 9, 2024 13:47

sarahfossheim added 3 commits October 18, 2024 02:39

add checkboxes on category page, update texts, minor bugfixes

6b24d96

select correct technology in comparison view, remove category selecto…

cf7c0e8

…r, minor bugfixes

fix css linting

bf11a13

github-advanced-security bot found potential problems Oct 23, 2024

View reviewed changes

src/js/components/filters.js Fixed Show fixed Hide fixed

sarahfossheim added 5 commits October 23, 2024 15:42

fix linting

ce8df02

Merge branch 'main' into cwvtech-category-dashboard

bc5af01

fix linting

b74de3b

Merge remote-tracking branch 'refs/remotes/origin/cwvtech-category-da…

728d42f

…shboard' into cwvtech-category-dashboard

fix sorting order multi apps

0d062cc

sarahfossheim marked this pull request as ready for review November 4, 2024 23:04

sarahfossheim requested a review from rviscomi November 4, 2024 23:13

sarahfossheim added 4 commits November 8, 2024 12:45

sort table alternative correctly

aea33e1

merge main into branch

7aaf182

close <nav>

fea35f0

merge master into branch

c16fe45

sarahfossheim changed the title ~~[WIP] Category dashboard with collapsible filters~~ Category dashboard with collapsible filters Dec 4, 2024

rviscomi requested a review from tunetheweb December 4, 2024 15:14

sarahfossheim added 2 commits December 18, 2024 01:12

update tests

3987516

format tests

5a45a40

rviscomi reviewed Dec 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Category dashboard with collapsible filters #934

Category dashboard with collapsible filters #934

sarahfossheim commented Sep 24, 2024 •

edited

Loading

rviscomi left a comment

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

rviscomi Dec 18, 2024

	this.dataArray = this.dataArray.sort((techA, techB) => {
	this.dataArray = this.dataArray.filter(tech => tech.length).sort((techA, techB) => {

Category dashboard with collapsible filters #934

Are you sure you want to change the base?

Category dashboard with collapsible filters #934

Conversation

sarahfossheim commented Sep 24, 2024 • edited Loading

New features

Bugfixes

rviscomi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sarahfossheim commented Sep 24, 2024 •

edited

Loading