DRAFT | SystemLink Data Frames Data Source | Enable high resolution zoom for numerical data in Plotly panel

[kartheeswaran-ni]

Pull Request

🤨 Rationale

1. For the decimated Data table data, when the user zooms a plot, the high-resolution data should be shown for the zoomed-in range.
2. When there are multiple panels in the dashboard with the same x-axis, those panels should also be updated to show the high-resolution data for the zoomed-in range.

👩‍💻 Implementation

Problem

Grafana’s architecture strictly separates the panel and data source plugins. Communication is one-way: data flows from the data source to the panel, not the other way around.

Data sources are responsible for fetching data based on the query model (query object) and the time range. Only changes to the query model (via the Query Editor or dashboard variables) or the time range picker can trigger new queries.

Panels are responsible for visualizing data. They receive data from the data source and render it, but do not control how or when the data source fetches data.

Updates in UI

Renames the "Use time range" control as "Fetch high resolution data" to have that as a common control for both TIMESTAMP and numerical types of data.

Future UI update plans

There will be a new control added to choose the "xColumn" for decimation. Currently assumed that the "xColumn" as the first column selected in the "Columns" control.

Note: The "xColumn" chosen in the data source and the "x-axis" chosen in Plotly should be the same for the high-resolution zoom to work as expected.

Solution

• Used the Query params in the browser's URL to enable communication between the data source and the Plotly panel plugin.
  • Say when the fetch high resolution data is enabled in the Panel 1 and 2, the query params will have fetchHighResolutionData=1,2.

Note: I've added comments in the code to explain why certain things are done. In addition to that, I've added PR line comments to add more context.

Issues which are yet to be fixed

As we refresh the whole page while zooming, the scroll position is lost.

🧪 Testing

To be updated in the production version of the PR.

✅ Checklist

• This PR has a title that follows the commit message format.

[kartheeswaran-ni]

The "Plotly" panel is updated to handle zoom based on the query params state.

Hence, when the dashboard is loaded for the first time, the query params need to be updated.

I've added this here because this was the only place in the data source where both query and request values are available.

[kartheeswaran-ni]

When the user zooms in plot, the "Plotly" panel will update the query params and trigger a whole dashboard refresh.

Those range values are used to form filters for the query decimated data API call.

[kartheeswaran-ni]

When fetchHighResolutionDataOnZoom is enabled in a panel, and if the user zooms in plot, the "Plotly" panel will update the query params and trigger a whole dashboard refresh.

We need to refresh the dashboard as a whole because there aren't any out-of-the-box APIs available to handle this in any other optimised way.