Grouping versions when filtering

[ZhukDmitryOlegovich]

Hello! (and I apologize in advance - here and further - Google Translate)

What did I want to do?

Unexpectedly, I discovered that this wonderful site has filter settings based on browserslist. Having tinkered a little with throwing out not op_mini all from the project in which I am working and something similar, it worked and... I realized that this is what I should use. The project is massive enough to have high requirements for it. For example, working with version 52 of FF and in order to take a screenshot I had to remember how the extension works that takes a screenshot of the entire page, because each version is indicated by a separate block and is not grouped as without a filter

😞 Very long screenshot No. 1

😞 Very long screenshot No. 2

Formalized problem

Too much space on the screen is either not occupied by anything, or is occupied by listing versions which for me does not make sense as the final goal. To see the entire report you need to scroll a lot

Potential Solution

Group versions together in the same way as without filters

My suggestion

I dug a little into the assembled code (I didn’t find a repository with a front-end version of this project in the public domain, if so, then of course it’s worth adding a link) and found how to fix it (thank you Chrome, file override and lack of memoization in the final build). Accordingly, the screenshot below is fixed in real form - no image editing ✂️ =) In my opinion, this is very convenient. Is it possible to fix what I suggest?

💾 Version with fix bundle.js?1709190964.txt (I had to add .txt to insert into github)

Details of what was corrected in the code

In the function getVersions ./src/components/ciu-browser-support.ts

//from
return Object(_utils_support_table_utils__WEBPACK_IMPORTED_MODULE_2__["makeVersionArr"])(this.browserModel, this.featureModel, filter);
// to
return Object(_utils_support_table_utils__WEBPACK_IMPORTED_MODULE_2__["makeCombinedVersionArr"])(this.browserModel, this.featureModel, filter);

In the function makeCombinedVersionArr ./src/utils/support-table-utils.ts

1.   //from
     function makeCombinedVersionArr(browserModel, featureModel) {
     // to
     function makeCombinedVersionArr(browserModel, featureModel, filter) {

2.   //from
     let supportData = featureModel.supportDataByBrowser[browserModel.id];
     // to
     let supportData = featureModel ? featureModel.supportDataByBrowser[browserModel.id] : null;

3.   //from
     let item = supportData[version.id];
     // to
     let item = supportData ? supportData[version.id] : makePreviewData(version);

4.   // from (x3)
     if (currentCombined) {
     // to (x3)
     if (currentCombined && currentCombined.length) {

5.   //from
     if (isDifferent) {
     // t(w)o (lines)
     const filtered = !!filter && !filter(version)
     if (isDifferent || filtered) {

Surprisingly, it turned out to be not very difficult (9 lines of code), which gave me the seed of doubt “isn’t this a feature”, but if anything, it was just an interesting experience =) It will also be interesting to get advice / suggestions on how and what I I could have done it differently - maybe there is too much text for issue?)

Thank you in advance!

[ZhukDmitryOlegovich]

Oh, I noticed that now the versions in the “Date relative” section are also combined, which no longer looks ok - here’s the fix (I won’t re-upload the bundle)

// from
return Object(_utils_support_table_utils__WEBPACK_IMPORTED_MODULE_2__["makeCombinedVersionArr"])(this.browserModel, this.featureModel, filter);
// to
return Object(_utils_support_table_utils__WEBPACK_IMPORTED_MODULE_2__[this.viewMode !== _constants__WEBPACK_IMPORTED_MODULE_1__["ViewMode"].DATE_RELATIVE ? "makeCombinedVersionArr" : "makeVersionArr"])(this.browserModel, this.featureModel, filter);