How to subscribe to Grafana application events

Grafana Plugin Development Share & showcase
2

Hi @marcusolsson ,

Thanks for writing an official documentation about events in Grafana.
I’ve followed step by step your sample and implemented on my grafana plugin panel. I’m trying to get all DataHoverEvents and LegacyGraphHoverEvent from others to my custom panel.

The thing is DataHoverEvents and LegacyGraphHoverEvent events are not firing.
I’ve fired a DataHoverEvent manually after X seconds for testing I am subscribing properly to these events and my subscription works, so the only thing I can assume is the events are not firing from panels.

I can check how the RefreshEvent is working properly but not the events I need.
I cannot see any kind of errors or any weird logs. The tooltip from panels is working but the event is not firing.

Why is happening this?

I am using docker-compose with:

  • Grafana: grafana:9.2.15-ubuntu
  • MySQL: mysql:latest

My code:

export const VideoPanel: React.FC<Props> = ({
	options,
	data,
	eventBus,
  }) => {

	const [timestampState, setTimestampState] = useState(-1);
	const [valueState, setValueState] = useState(-1);
 
  
	useEffect(() => {
  
	  const subscriber = eventBus.getStream(RefreshEvent).subscribe(event => {
		console.log(`Received event: ${event.type}`);
	  });
  
	  const subscriber2 = eventBus.getStream(DataHoverEvent).subscribe(event => {
		console.log(`Received event: ${event.type}`);
	  })
  
	  const subscriber3 = eventBus.getStream(LegacyGraphHoverEvent).subscribe(event => {
		console.log(`Received event: ${event.type}`);
	  })
  
	  return () => {
		subscriber.unsubscribe();
		subscriber2.unsubscribe();
		subscriber3.unsubscribe();

	  };
	}, [eventBus]);
  
	return (
	  <div className="video-panel" style={{ overflow: 'auto' }}>
  		  <div>
			<div>DATA event</div>  
			<div>Timestamp: {timestampState}</div>
			<div>Value: {valueState}</div>
		  </div>
	  </div>
	);
  };