Pin Data Not Accurate on Hover

[efrenmarin45]

Describe the bug
On initializing the map and zooming in to neighborhood pins, when hovering over one pin it will display a request as expected. When hovering over another pin, it will either show a request with information of the previous request or of a completely random request that is no where near the pin the user is hovering over.

To Reproduce
Steps to reproduce the behavior:

1. Go to the chart and zoom in enough to see the pins.
2. Hover over one pin and wait for the data to load. Slowly move over to another pin and the data shows the previous pin data.
3. See error

Expected behavior
Hovering over the pins should each show their respective data and color codes per request.

Screenshots
Screen recording showing:

• An initial hover over a "Bulky Items" pin.
• Moused over to a different pin, "Homeless Encampment".
• Moused over to "Illegal Dumping" pin.
• Went back to first pin, "Bulky Items" but hover now shows "Single Streelight Issue".
• I went back and forth between the same pins to show the delay in data populating correctly.

pin.hover.bug.mp4

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox Developer Edition
• Version: 136.0b3 (64-bit)

Additional context
Not sure if this happens in certain neighborhoods. While testing this, I tried multiple neighborhoods and some have this issue and others don't. Seems to happen at random.

[ryanfchase]

@efrenmarin45 adding critical labels:

• missing labels: please fill them out if you are familiar
• I've added a milestone for this because this is clearly a bug report
• I don't need to add draft since this looks sufficient, however I need to know if this ticket may embody the work highlighted in a comment on @DorianDeptuch's open PR
  • link to Dorian's Ticket: DEV - Update styling of the Service Request details modal #1870
  • link to relevant comment: Update styling of service request details modal 1870 #1906 (review)

I'm going to move this into Questions and add to Wednesday's agenda, so that we can assess if Dorian should complete this work within his open ticket, or if this bug should be handled in it's own ticket (here). I'm leaning towards keeping this ticket so that Dorian may wrap up his work.

Please add questions about labels and ticket management here: #1878

[ryanfchase]

This discussion item was marked as completed on today's agenda. Were we able to get an update? @traycn @efrenmarin45 @DorianDeptuch

[ryanfchase]

There are two approaches that I recommend to tackle this ticket, I have highlighted my approach on this PR comment. I have also attached my version of the

• In order to avoid the border styles bug, I think we can use my approach of using two different refs -- one for loading spinner and one for the actual request details
  • I recommend firing of the db request when the loading spinner mounts
  • I recommend populating the SR data into redux stores so that the actual SR modal can simply just retrieve it from redux after we know the data was obtained successfully
• I don't have an answer for how to deal with "firing off too many db requests too fast" problem that we have when we mouse-over many SRs. We'll need some way of cancelling the previous db request, or we need a way to tell the SR details modal that is waiting on a SPECIFIC db request

Abrupt Changes: Steps To Reproduce

1. Select an NC
2. Hover over an SR, then mouse over to a different SR before the first finishes loading
3. Observe that once the new SR loads, it will abruptly update its values

Abrupt Changes Bug

abrupt-changes.mp4

Steps to Reproduce: Border Styles Gets Confused

1. Select an NC
2. Briefly hover over an SR, do not allow it to load
3. Scan the mouse over other SRs, do not pause to allow them to load
4. Observe that the SR Details modal will pop in with (what I assume to be) the previous SR's details, and that no new loading spinner is applied
5. Finally mouse over and stay on a final SR
6. Observe that the previous SR's details will appear first (with the wrong border radius styles), and shortly after it abruptly changes to the correct SR details (with the correct border radius)

Note on step 6: I did a poor job of demonstrating this in the video, but you can see this for a split second around 0:10 ~ 0:11 second mark in the video below.

Screen Recording of wrong SR details, and Border Radius applied late

mouse-out-before-data-loads.mp4