[historical-view] Changes colors on the map when timeslider is used

[madsnedergaard]

Description

part of #3938

This will make the colors on the map change for all countries where we have loaded historical data, whenever the time-slider is dragged.

For now this will only happen when a user has already clicked a zone, but that will change when we starting using v5 state :)

Preview

[Kongkille]

Perhaps we should just initially start by querying all features here. I did so in my prototype with quite good performance.

Then we can optimize it through dragging if we'd like later on, I'm worried this will cause some odd experiences.

[madsnedergaard]

Hmm, in your prototype (on mk/map-color-feature-states) we also change only color of the zones that are rendered as far as I can tell :)

Kapture.2022-05-05.at.15.39.58.mp4

[madsnedergaard]

I tried doing this, but couldn't find a way in mapbox documentation of getting all features (and not just the rendered ones). I also tried using the sources.features that we're generating, but the schema differs:

[Kongkille]

Apologies, you're right. Maybe there's a way to circumvent this, but your approach seems to be as intended.

I just added IsDragging to the dependency array, and it actually works great since it will both trigger on dragStart and dragEnd. It also triggers when zooming out but it doesn't trigger too much.

I also tried viewport but that fires way too much.

I suggest we just add the isDragging for now? Maybe that's enough to fix everything :)

[madsnedergaard]

Thanks for testing and good point, that definitely solves some of the problems - let's roll with it! :)

[Kongkille]

Nice :)

I am having some issues testing this. Can you describe how to get the featureToggle working?

Also, I think we'd also need to update the tooltip for this feature to really work in itself. We can handle it in a seperate PR since this is behind a featureToggle if you'd prefer, but I think it ties into this quite well.

[madsnedergaard]

Thanks for the review! You can test with http://localhost:8080?feature=history :)

And good point with the tooltips, I've created a new issue for it and will work on it in a separate PR.

EDIT: Ah wait, there is a bug where the mockserver can't handle if query parameters start with & and not ?. I have fixed it locally (until we're changing this when changing endpoint) by changing to this in sagas/index.js (L38):

  if (features.length > 0) {
    endpoint += `?featureflag=true${features.map(f => `&${f}=true`)}`;
  }

[Kongkille]

Just approving, but I think we could add isDragging to the useEffect and see if that doesn't just fix everything.

[madsnedergaard]

Turns out fixing the tooltip was very simple, so I went ahead and did it in this PR too :)