PanelAttention: Fix delay

[tskarhed]

Problem: If you move your mouse from another panel quickly, it means that the mouseover will be executed before the debounce mousemove on the previous panel. This causes inconsistency.

Solution: Debouncing onMouseEnter too prevents this, but if you press e within 100ms of entering the new panel, it will always enter the old panel.

If this approach isn't good enough, we could try to decrease the debounce time. If there is any other approach that I could consider, I'm all ears!

Closes https://github.com/grafana/grafana/issues/90020

📦 Published PR as canary version: 5.9.1--canary.867.10450028526.0

:sparkles: Test out this PR locally via: ```bash npm install @grafana/scenes-react@5.9.1--canary.867.10450028526.0 npm install @grafana/scenes@5.9.1--canary.867.10450028526.0 # or yarn add @grafana/scenes-react@5.9.1--canary.867.10450028526.0 yarn add @grafana/scenes@5.9.1--canary.867.10450028526.0 ```

[torkelo]

@tskarhed see the comment from @ashharrison90

[tskarhed]

@torkelo Yes, we tried to fix it, but we just couldn't get it running when linking Scenes. I could make the code change, but I have no way of testing it. Since I get no error, I can only assume it has to do with some incompatible version of Grafana UI, although updating the dependency locally did not do the trick.

I would really appreciate some help with testing it, I had similar issues the last couple of times working with Scenes.

[torkelo]

@tskarhed it looks like we still have the problem that when yarn linking scene into main repo the grafana/ui dependency is not the one from runtime (core) but the scenes get's' it's own copy bundled in (using the version specified in this repos package json)

I recall that we had fix this

[torkelo]

@tskarhed so the reason it's not working now when testing this is that PanelChrome used is an old version that does not have onMouseEnter onMouseLeave etc,

added a release label to this PR, we can test with the npm canary release that will be generated

[ashharrison90]

i've hacked it locally (just updated scenes-app package.json to use canary versions of all the @grafana/ packages)...

and the leading option works, but you have to specify both leading and trailing, like:

  const debouncedMouseMove = useMemo(() => debounce(setPanelAttention, 100, {
    leading: true,
    trailing: false,
  }), [setPanelAttention]);

[tskarhed]

I still can't get this to run. I changed to "@grafana/ui": "11.3.0-192050" in Scenes' package.json. If someone else could verify that this works, it would be great.

[tskarhed]

i can verify this works. you probably don't want the changes in scenes/package.json and yarn.lock tho

Oops 😢

[grafanabot]

:rocket: PR was released in v5.9.1 :rocket:

[bob454522]

i installed Grafana v11.3.0-75433 (cdf035f813) to address a different (un-related) bug, and wanted to make a note here that this is still occurring (ie there is still a large lag/delay on pressing e to edit a panel, so you frequently end up editing the wrong panel accidentally).

apologies if this is planned to be fixed in a different version, but i wanted to bring this up (as from the best I can tell, this merge should be in the nightly that im currently running - ie v11.3.0-75433 - but im not proficient in coding/github ).

happy to provide any further data/assistance thank you

[frifox]

Confirming. Still an issue on v11.3.0-196835 (d1ffcc22d9)

[tskarhed]

@bob454522 @frifox Can you reproduce this on https://play.grafana.org/ ? It is running Grafana v11.3.0-75826

[frifox]

Seems to be fixed.

Don't know how play.grafana.org version tags correlate to docker images, but:

• Upgraded my local docker instance to grafana/grafana-oss-dev:11.3.0-198777 = it's fixed.
• Downgraded to older grafana/grafana-oss-dev:11.3.0-196835 image = bug is back.

[tskarhed]

I am not exactly sure when the Scenes version bump happened in core Grafana, but I bet that's when it was fixed. As for the version - 11.3 hasn't been released yet, so it should only be solved in either dev versions or Grafana Cloud until then.