How can I tell which ax is selected on an interactive shiny for python plot?

Question

I'd like to generate a figure with multiple subplots that has basic interactivity; clicking, hovering etc...

Here is an example of a figure with a single subplot from the official docs: https://shinylive.io/py/examples/#basic-plot-interaction.

How can I identify which ax is being hovered over in a figure with multiple subplots?

Here's an example of the JSON sent by hovering:

{
  "x": 3.5142333228259792,
  "y": 15.062603892154872,
  "coords_css": {
    "x": 440,
    "y": 289
  },
  "coords_img": {
    "x": 445.2547771977413,
    "y": 289
  },
  "img_css_ratio": {
    "x": 1.011942675449412,
    "y": 1
  },
  "mapping": {
    "x": null,
    "y": null
  },
  "domain": {
    "left": 1.3174499999999998,
    "right": 5.61955,
    "bottom": 9.225,
    "top": 35.074999999999996
  },
  "range": {
    "left": 40.73333333333335,
    "right": 832.9333129882813,
    "bottom": 363.26666666666665,
    "top": 34.400000000000034
  },
  "log": {
    "x": null,
    "y": null
  }
}

However, for a figure with multiple subplots, this JSON lacks information about which subplot the hovering is happening over. (It is identical in structure to the JSON above).

"range" contains the range, in pixels, of the subplot being hovered over. So, obviously, that would be useful information. If you knew the full range in both both x and y, and the proportions of the axes, you could probably work backwards.

But I can't see any function/method in the shiny for python API that returns the range of the entire figure. (I think the range of the entire figure would have to be checked on every hover event, given the window, and therefore figure, may have been resized).

This seems like useful functionality, and perhaps there's an easier way?

score 0 · Answer 1 · answered Apr 08 '23 at 08:22

TL;DR Generate each plot separately on the server side and bind them with a CSS

One option is to have separate plots (the same as in the subplot) and bind them with a CSS grid/flex on the front side. You will generate each plot separately on the server side (separate outputs) so the JSON with the data will be accessible under the unique id for each plot.

Another idea is to get the selected plot in the subplot from the coordinates. If you know the dimensions (fixed or dynamic with active reference) and the grid structure, then you can easily write a function to get the selected plot for you. This solution seems to be less stable.

How can I tell which ax is selected on an interactive shiny for python plot?

1 Answers1