Persistent, stateful hover, click, and selection properties

In Dash, the Graph component stores the data from hover, click, and selection events as part of the component’s state and passes that to the user as hoverData, clickData, selectionData.

In some cases, the user may want to initialize their app with a point already “clicked”, a region “preselected”, or a point “hovered”.

This is related to “Customized Click, Hover, and Selection Styles”. The viewer will know that the graph has been pre-selected, clicked, or hovered through whatever custom styles the developer added.

Ideally, this API would match the same event data. For example, when hovering over a point, the event data might be:

{
    "points": [{"x": 1, "y"; 4}]
}

Ideally, the user would be able to pass that in as part of the figure to trigger those styles themselves. That’s how the Dash API currently works although styles are not applied:

Graph(
    figure={...},
    hoverData={"points": [{"x": 1, "y": 4}]}
)

---

cc @alexcjohnson @etpinard @monfera @jackparmer @charleyferrari

[etpinard]

What is hoverids? Are these supposed to be used by the end-user?

hoverids will be the values in the trace’s ids array corresponding the selected points.

Right now Dash users use customdata for the purposes of “ids”

Would it be too much to ask to swap customdata for ids. PR https://github.com/plotly/plotly.js/pull/1770 made the ids attribute available to all trace types.

To clarify the a few about @chriddyp 's last https://github.com/plotly/plotly.js/issues/1848#issuecomment-337715716, the API will more like:

{
  x: [10, 20, 30, 40, 50],
  // get rid of customdata, ids is what you want to use here
  ids: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5'],
  marker: {size: 10},

  selected: {
    marker: {color: 'blue'}
  },
  unselected: {
    marker: {opacity: 0.5}
  },
 
  // selectedpoints is an array of indices
  selectedpoints: [2, 4],

  hovered: {
    marker: {line: {color: 'lightgrey'}}
  }

  // here too, an array of indices
  hoveredpoints: [0, 3]
}

Now to do something like @chriddyp 's

  selectedpoints: {
    x: [30, 50],
    ids: ['id-3', 'id-5'],
    customdata: ['id-3', 'id-5'],
    mode: 'markers+text'
  }

would be a little trickier, but not impossible as mode is not arrayOk. One would have to set mode: 'markers+text' at the trace’s root level with textfont.color: 'rgba(0,0,0,0)' and then e.g. set selected.textfont.color: 'blue'. Hmm maybe we could do better?

[etpinard]

Ha I see. Sounds to me we might need (down the road) some sort of shared data structure across traces:

{
  __DATA__: [{
    name: 'DATA',
    columns: [{
      name: 'a',
      values: [1, 2, 3]
    }, {
      name: 'b',
      values: [1, 2, 1]
    }, {
      name: 'c',
      values: [2, 1, 2]
    }],
    selection: [1, 2]
  }],
  // but really, data here should be 'traces'
  data: [{
    x: 'DATA.a',
    y: 'DATA.b'
  }, {
    x: 'DATA.a',
    y: 'DATA.c',
    xaxis: 'x2',
    yaxis: 'y2'
  }]
}