Custom panel props not updating after save/apply

[marcushorsley]

I am developing a custom panel plugin, whereby the user can draw shapes on an embedded canvas.

A cut down example - but below illustrates that my component receives props, which contain a list of shapes.

export interface MyCustomOptions {
  shapes: readonly Shape[];
}

export const MyCustomPanel: React.FC<PanelProps<MyCustomOptions>> = ({ props, data, eventBus, onOptionsChange }) => {

When a dashboard loads, I populate the canvas with any stored data, essentially as part of the React componentDidMount phase, and this works fine. My canvas exposes an onChange event callback, which I use to programatically mutate the component props with any changed/newly added shapes.

This is my bug scenario:

1. User loads a dashboard with a panel already created, but a blank canvas. This mounts an instance of my ReactComponent - ‘A’.
2. User clicks Edit Panel. This doesn’t un-mount the original component ‘A’, but does now create a second instance ‘B’ in addition.
3. The user adds some new shapes to the components, which are set on the props.shapes field.
4. The user clicks Save, persisting the props changes to the dashboard JSON.
5. The user clicks the Grafana back arrow to return to the view mode. Unfortunately, the React component ‘A’ never received any updated copy of the props - so the canvas doesn’t reflect the changes just made in the edit view.

I’ve tried useEffect hooks, and polling the props in a setInterval loop - nothing seems to work barring refreshing the whole dashboard. Any help recommending how to keep the props state not stale between view/edit screens would be very welcome!

Best Regards,

Marcus