Category dashboard with collapsible filters #934
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
sarahfossheim
changed the title
There was a problem hiding this comment.
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!
|
|
||
| console.log(sortMetric); | ||
| if(sortMetric) { | ||
| this.dataArray = this.dataArray.sort((techA, techB) => { |
There was a problem hiding this comment.
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.
| this.dataArray = this.dataArray.sort((techA, techB) => { | |
| this.dataArray = this.dataArray.filter(tech => tech.length).sort((techA, techB) => { |
| "type": "heading" | ||
| }, | ||
| { | ||
| "key": "origins", |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Formatted them with commas everywhere now
| }); | ||
| } | ||
|
|
||
| this.dataArray.forEach(technology => { |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Created a follow-up issue for the pagination: #997
| "type": "heading" | ||
| }, | ||
| { | ||
| "key": "origins", |
There was a problem hiding this comment.
When filtering to the top 1k rank, I'm seeing technologies with "null" origin counts
| // 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]; |
There was a problem hiding this comment.
"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:
But in the technology drilldown it's clearer that the most recent (and only) data point is from April 2022:
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.
There was a problem hiding this comment.
Using &start=latest in the requests on the categories dashboard now, which should result in only receiving techs with data for the latest month.
When testing the page from the example above (/reports/techreport/category?tech=&geo=ALL&rank=Top+1k&category=CMS), OctoberCMS no longer gets returned.
| <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"> |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Yes, agree some sort of text input is needed for those long dropdowns. I suggest doing it in a follow-up PR, so this one doesn't become even bigger to review? Should I create an issue for it?
Co-authored-by: Rick Viscomi <[email protected]>
…summary, improve landing page card interaction
|
@rviscomi - I made a lot of updates based on the feedback you left, and created follow-up action items for the larger todos (sorting of the table f.ex) so those can go in a follow-up PR. Also fixed a few other things at the same time, like removing/replacing the placeholder texts and making the navigation responsive (hamburger menu). So it's ready for re-review :) |
New features
/reports/techreport/category/reports/techreport/tech(Visual) Improvements
aria-expanded)Bugfixes
Screenshots
Technologies
One technology
Multiple technologies
Desktop
Mobile
Categories