Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

VizPanelRenderer: Emit SetPanelAttention event #716

Merged
merged 9 commits into from
May 30, 2024
Merged

VizPanelRenderer: Emit SetPanelAttention event #716

merged 9 commits into from
May 30, 2024

Conversation

tskarhed
Copy link
Contributor

@tskarhed tskarhed commented May 3, 2024 •
edited by grafanabot

Addresses this issue grafana/grafana#47005 (comment)

Related PR in the Grafana repo: grafana/grafana#87317

Is this a good place to add this? Also, are there some drawbacks that may cause performance issues?

📦 Published PR as canary version: 4.24.4--canary.716.9300035734.0

✨ Test out this PR locally via:

npm install @grafana/scenes@4.24.4--canary.716.9300035734.0
# or 
yarn add @grafana/scenes@4.24.4--canary.716.9300035734.0

@tskarhed tskarhed mentioned this pull request May 3, 2024
Merged
3 tasks
torkelo
torkelo reviewed May 8, 2024
View reviewed changes
Copy link
Member

@torkelo torkelo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tskarhed is it not better to have this logic in PanelChrome? Scenes support many layout options (not only GridLayout), would be nice to share the logic between them

@tskarhed
Copy link
Contributor Author

tskarhed commented May 8, 2024

@tskarhed is it not better to have this logic in PanelChrome? Scenes support many layout options (not only GridLayout), would be nice to share the logic between them

True, it may be a bit more brittle though, causing multiple panels to have attention. But I can give it a go.

@tskarhed
Copy link
Contributor Author

tskarhed commented May 8, 2024

Ah, yes, that was the reason. If you have one panel in focus and then move the mouse over another, they both have attention, so you need something above keeping track of the attention state.

@torkelo
Copy link
Member

torkelo commented May 10, 2024

@tskarhed maybe GrafanaContext can have that?

@tskarhed
Copy link
Contributor Author

@torkelo If used with PanelChrome, wouldn't that be a dependency on core? And PanelChrome no knowledge of panel id :/

@torkelo
Copy link
Member

torkelo commented May 14, 2024 •
edited

@tskarhed grid / items does not know panel id either , maybe VizPanelRenderer can set attention? Just a question where state should live

@tskarhed
Copy link
Contributor Author

Okay, for non-scenes I have it working with the state living in KeyboardSrv (which is accessible with the useGrafana hook). The the update still happens in the GridItem part (haven't figured out where else this would work), but it could easily be added to any component in core and be extended.

For Scenes, it seems like VizPanelRenderer is a good place. It can emit an event when it gets attention (preferably it would also be able to read the current attention state to determine if it has attention in order to avoid a ton of events being emitted on MouseMove). Just not sure how to read this possible parent state. At the moment I'm looking at storing the state in DashboardScene, and have it subscribe to the event. The nice thing about the scenes approach is that it is easy to pass around the ScenesObject instead of ids.

@torkelo
Copy link
Member

torkelo commented May 16, 2024

@tskarhed why not use useGrafana and the KeyboardSrv to set state for scenes as well inside VizPanelRenderer?

Ah, plugins platform has not yet made useGrafana accessible to plugins :(

Then I don't know, maybe we need a new context that plugins (ie scenes) can interact with?

@tskarhed
Copy link
Contributor Author

@torkelo Good point. At the moment there is also duplicate functionality for the keybindings, which I could consolidate. setupKeyboardShortcuts for Scenes and KeybingingSrv for core. These could probably be handled the same way (although withFocusedPanel passing the actual Scene object is super useful, compared to just the panel id).

Maybe I'll look into exposing either useGrafana or just the keybindings if there may be unintended consequences.

@tskarhed
Copy link
Contributor Author

I created a service this time around. There are still some typing issues with VizPanel, and onMouseMove should probably be debounced, or something of the sort.

@tskarhed
Copy link
Contributor Author

@torkelo I have updated the approach using a service instead. Please tell me what you think.

torkelo
torkelo reviewed May 24, 2024
View reviewed changes
Copy link
Member

@torkelo torkelo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry had this unpublished review comment from 1-2 days ago (done on mobile)

Will take a look more closely next week (traveling today)

packages/scenes/src/components/VizPanel/VizPanelRenderer.tsx Outdated Show resolved Hide resolved
@tskarhed tskarhed mentioned this pull request May 29, 2024
Closed
@tskarhed tskarhed changed the title DashboardGrid: Attention state to handle keyboard and mouse focus VizPanelRenderer: Emit SetPanelAttention event May 29, 2024
@tskarhed tskarhed added the release Create a release when this pr is merged label May 30, 2024
@tskarhed tskarhed mentioned this pull request May 30, 2024
Merged
3 tasks
@tskarhed
Copy link
Contributor Author

It still has the @ts-ignore comments (which are needed at the moment), but it works using the canary grafana/ui

@tskarhed tskarhed requested a review from torkelo May 30, 2024 08:40
@tskarhed @torkelo
Update packages/scenes/src/components/VizPanel/VizPanelRenderer.tsx
897eb8c 
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
@tskarhed tskarhed merged commit cac532d into main May 30, 2024
2 checks passed
@tskarhed tskarhed deleted the keyboard-mouse-focus-state branch May 30, 2024 09:12
@grafanabot
Copy link
Contributor

🚀 PR was released in v4.24.4 🚀

@ivanortegaalba ivanortegaalba mentioned this pull request May 30, 2024
Merged
ivanortegaalba added a commit to grafana/grafana that referenced this pull request May 30, 2024
@ivanortegaalba
Scenes: Update to latest 4.23.1 -> 4.24.4 (#88485)
c5ae0bb 
# v4.24.4 (Thu May 30 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - VizPanelRenderer: Emit SetPanelAttention event [#716](grafana/scenes#716) ([@tskarhed](https://github.com/tskarhed))

#### Authors: 1

- Tobias Skarhed ([@tskarhed](https://github.com/tskarhed))

---

# v4.24.3 (Thu May 30 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - Macros: Resolve browser timezone for `$__timezone` [#759](grafana/scenes#759) ([@ivanortegaalba](https://github.com/ivanortegaalba))
  - Variables: Prioritize showing adhoc variable key and operator [#750](grafana/scenes#750) ([@oscarkilhed](https://github.com/oscarkilhed))

#### Authors: 2

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))

---

# v4.24.2 (Wed May 29 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - MultiValueVariable: Fixes issue when value is all value but all value is not enabled [#757](grafana/scenes#757) ([@torkelo](https://github.com/torkelo) [@ivanortegaalba](https://github.com/ivanortegaalba))

#### Authors: 2

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))

---

# v4.24.1 (Tue May 28 2024)

#### 🐛 Bug Fix

- Plugin.json: update schema reference URL in scenes-app [#754](grafana/scenes#754) ([@leventebalogh](https://github.com/leventebalogh))
- `@grafana/scenes`
  - Allow drag and dropping rows in valid states [#756](grafana/scenes#756) ([@mdvictor](https://github.com/mdvictor))
  - fix: undefined check on RefreshPicker.autoOption [#751](grafana/scenes#751) ([@darrenjaneczek](https://github.com/darrenjaneczek))

#### Authors: 3

- Darren Janeczek ([@darrenjaneczek](https://github.com/darrenjaneczek))
- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
- Victor Marin ([@mdvictor](https://github.com/mdvictor))

---

# v4.24.0 (Mon May 27 2024)

#### 🚀 Enhancement

- `@grafana/scenes`
  - SceneFlexLayout: Min width/height option was ignored [#749](grafana/scenes#749) ([@edvard-falkskar](https://github.com/edvard-falkskar))

#### Authors: 1

- Edvard Falkskär ([@edvard-falkskar](https://github.com/edvard-falkskar))

---
ivanortegaalba added a commit to grafana/grafana that referenced this pull request May 30, 2024
@ivanortegaalba
Scenes: Update to latest 4.23.1 -> 4.24.4 (#88485)
abc3e24 
- `@grafana/scenes`
  - VizPanelRenderer: Emit SetPanelAttention event [#716](grafana/scenes#716) ([@tskarhed](https://github.com/tskarhed))

- Tobias Skarhed ([@tskarhed](https://github.com/tskarhed))

---

- `@grafana/scenes`
  - Macros: Resolve browser timezone for `$__timezone` [#759](grafana/scenes#759) ([@ivanortegaalba](https://github.com/ivanortegaalba))
  - Variables: Prioritize showing adhoc variable key and operator [#750](grafana/scenes#750) ([@oscarkilhed](https://github.com/oscarkilhed))

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))

---

- `@grafana/scenes`
  - MultiValueVariable: Fixes issue when value is all value but all value is not enabled [#757](grafana/scenes#757) ([@torkelo](https://github.com/torkelo) [@ivanortegaalba](https://github.com/ivanortegaalba))

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))

---

- Plugin.json: update schema reference URL in scenes-app [#754](grafana/scenes#754) ([@leventebalogh](https://github.com/leventebalogh))
- `@grafana/scenes`
  - Allow drag and dropping rows in valid states [#756](grafana/scenes#756) ([@mdvictor](https://github.com/mdvictor))
  - fix: undefined check on RefreshPicker.autoOption [#751](grafana/scenes#751) ([@darrenjaneczek](https://github.com/darrenjaneczek))

- Darren Janeczek ([@darrenjaneczek](https://github.com/darrenjaneczek))
- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
- Victor Marin ([@mdvictor](https://github.com/mdvictor))

---

- `@grafana/scenes`
  - SceneFlexLayout: Min width/height option was ignored [#749](grafana/scenes#749) ([@edvard-falkskar](https://github.com/edvard-falkskar))

- Edvard Falkskär ([@edvard-falkskar](https://github.com/edvard-falkskar))

---

(cherry picked from commit c5ae0bb)
@ivanortegaalba ivanortegaalba mentioned this pull request May 30, 2024
Open
miguelmolina95 pushed a commit to miguelmolina95/grafana that referenced this pull request Jun 3, 2024
@ivanortegaalba @miguelmolina95
Scenes: Update to latest 4.23.1 -> 4.24.4 (grafana#88485)
c081ee0 
# v4.24.4 (Thu May 30 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - VizPanelRenderer: Emit SetPanelAttention event [grafana#716](grafana/scenes#716) ([@tskarhed](https://github.com/tskarhed))

#### Authors: 1

- Tobias Skarhed ([@tskarhed](https://github.com/tskarhed))

---

# v4.24.3 (Thu May 30 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - Macros: Resolve browser timezone for `$__timezone` [grafana#759](grafana/scenes#759) ([@ivanortegaalba](https://github.com/ivanortegaalba))
  - Variables: Prioritize showing adhoc variable key and operator [grafana#750](grafana/scenes#750) ([@oscarkilhed](https://github.com/oscarkilhed))

#### Authors: 2

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))

---

# v4.24.2 (Wed May 29 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - MultiValueVariable: Fixes issue when value is all value but all value is not enabled [grafana#757](grafana/scenes#757) ([@torkelo](https://github.com/torkelo) [@ivanortegaalba](https://github.com/ivanortegaalba))

#### Authors: 2

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))

---

# v4.24.1 (Tue May 28 2024)

#### 🐛 Bug Fix

- Plugin.json: update schema reference URL in scenes-app [grafana#754](grafana/scenes#754) ([@leventebalogh](https://github.com/leventebalogh))
- `@grafana/scenes`
  - Allow drag and dropping rows in valid states [grafana#756](grafana/scenes#756) ([@mdvictor](https://github.com/mdvictor))
  - fix: undefined check on RefreshPicker.autoOption [grafana#751](grafana/scenes#751) ([@darrenjaneczek](https://github.com/darrenjaneczek))

#### Authors: 3

- Darren Janeczek ([@darrenjaneczek](https://github.com/darrenjaneczek))
- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
- Victor Marin ([@mdvictor](https://github.com/mdvictor))

---

# v4.24.0 (Mon May 27 2024)

#### 🚀 Enhancement

- `@grafana/scenes`
  - SceneFlexLayout: Min width/height option was ignored [grafana#749](grafana/scenes#749) ([@edvard-falkskar](https://github.com/edvard-falkskar))

#### Authors: 1

- Edvard Falkskär ([@edvard-falkskar](https://github.com/edvard-falkskar))

---
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@torkelo torkelo torkelo approved these changes

Assignees
No one assigned
Labels
release Create a release when this pr is merged released
Projects
Dashboards
Status: 🚀 Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@tskarhed @torkelo @grafanabot