[BUG] features selection in ItemListCard

[enury]

The selection of features to display in an ItemListCard is not working properly.

The facet counts and the numbers displayed in the HoverBubble are always correct, as far as we could see, However the actual features in the list are practically always wrong after they were filtered because of a facet search.

This problem is easily visible when selecting a type. Here for instance, we are supposed to see the papyri of type "Recording of Information" located in Hermopolites. There should be four of them, the correct number is given in the HoverBubble, but in the list there are actually 5, and only the first one is of the correct type.

If I add a console.log(items); in Facet.js, I can check that the facet is returning the correct features. But they don't make it into the ItemListCard. After some digging, this is what I understand:

• in Map.jsx at lines 114-119, the code is getting the nearest colocated neighbours from the whole dataset, instead of only the features selected by the facets.
• it may come from the following line of code: const neighbours = knn(this.spatialIndex, x, y, n + 1); in the line 115 of Store.js ?

So it would need to

1. either create another tree with only the features of the query, but I don't really understand how the variable this.spatialIndex is filled;
2. or add a filter function to knn(), looping over all the facet filters to select only the features that satisfy all of them...

EDIT: I'm not sure about the last! I've tried adding a filter function just to see if it could be implemented, but it seems that the wrong selection of features had already happened. I changed the code below in Store.js, and the items that were logged into the console did not match the facet selection:

  getNearestNeighbours = (feature, n) => {
    const [x, y] = centroid(feature)?.geometry.coordinates;
    const neighbours = knn(this.spatialIndex, x, y, n + 1, function (item) {
      console.log(item.node.properties);
      return item;
  });

Dear @rsimon , @docuracy , @thegsi if you have any advice on how to proceed, that would be helpful!

[enury]

Update

I tried to implement solution n.1 above, and I think that it works at least for our map.

The commit is a bit useless because of a whitespace problem, but here are the actual changes I made:

• in Store.js, added a new function getColocatedFeatures (here) and imported getBounds at l.11
• in Map.jsx, imported the new function (l.18) and added these lines.

[thegsi]

Thanks for raising these @enury . We're not currently working on this codebase, I'm not sure we be able to help at the moment, sorry.