Thumnail ordering in collections

[seignovert]

Hello,

Thanks for this very nice browser!

I just published my first STAC catalog and I'm experiencing a strange behavior with stac-browser 3.1.0 when multiples thumbnails are attached to an item. The preview displayed in the parent collection is the 1st thumbnail on Firefox and the last one on Chrome. Is there a way to ensure a consistent behavior?

Here is an example: https://radiantearth.github.io/stac-browser/#/external/vims.univ-nantes.fr/stac/titan/030ti/collection.json

On Firefox I get:

Whereas on Chrome I have:

In my case, the would prefer to always display the 1st thumbnail (like on Firefox).

[m-mohr]

Interesting, I assume it depends on how the JS engine deserializes and orders objects. As object properties per the JSON specification don't have an order, I can't fetch "the first one", I can only really order them by key or so. Maybe for this case we can define some kind of best practice that we add another role (e.g. primary) for the thumbnail to be used?

[seignovert]

I think I have found where the problem is coming from:

stac-browser/src/models/stac.js

Line 302 in aa24c1d

thumbnails.sort(a => a.roles.includes(prefer) ? -1 : 1);

The .sort() method is different between the 2 JS engine (see https://stackoverflow.com/q/64396555) when the result of the function return the same value. Here, all the preferred roles are equal to -1, then Firefox keeps the original ordering whereas Chrome is returning the reverse of the original array.

I'm not sure how to change this efficiently but I'm not sure this .sort() method is actually required. It should be a filter method instead.

[m-mohr]

Thanks for the investigation. I'll have a look once I'm back from the STAC sprint or you can go ahead and create a PR for it, too. :)

[m-mohr]

Thanks, this should be fixed now. See b23fb2e