Select/pin individual pixels on Plotly heatmap

Question

On Plotly heatmaps, it is sometimes useful to have 2 selection modes:

• Rectangular selection (already available in modbar)

• Select/fix individual pixels: I'm trying to achieve this by recycling an existing "drawcircle" button that I don't need. When clicked, the pixel should highlight, or have a colored disk (or red "pin" like the Google Maps UI) on top of it

Problem: When the drawcircle tool is selected in the modbar, the plotly_click event does not fire (so we cannot get the coordinates), and plotly_selected No initial mouse click position is given. (I don't want to make a true circle, I just want to use the first click). See also Event handlers in JavaScript

const z = Array.from({
  length: 50
}, () => Array.from({
  length: 50
}, () => Math.floor(Math.random() * 255)));
const plot = document.querySelector("#plot");
const data = [{
  type: 'heatmap',
  z: z
}];
const layout = {
  'yaxis': {
    'scaleanchor': 'x'
  }
};
const config = {
  modeBarButtons: [
    ["zoom2d"],
    ["zoomIn2d"],
    ["zoomOut2d"],
    ["autoScale2d"],
    ["select2d"],
    ["drawcircle"]
  ],
  displaylogo: false,
  displayModeBar: true
};
Plotly.newPlot('plot', data, layout, config);

plot.on("plotly_selected", (data) => {
  console.log(data);
});
plot.on('plotly_click', (data) => {
  console.log(data);
});

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="plot"></div>

How do I use the Select/Fix Pixels/Points mode bar tool on a Plotly heatmap?

Note: Python documentation is more complete than the JS version: Add/Remove Modal Bar Buttons

Answer 1

Studying your example, I found that your console.log does not provide the expected data because the data is circular. However, since data.points has a single element, you can get the coordinates via data.points[0].x, data.points[0]. They are y and data.points[0].z respectively.

const z = Array.from({
  length: 50
}, () => Array.from({
  length: 50
}, () => Math.floor(Math.random() * 255)));
const plot = document.querySelector("#plot");
const data = [{
  type: 'heatmap',
  z: z
}];
const layout = {
  'yaxis': {
    'scaleanchor': 'x'
  }
};
const config = {
  modeBarButtons: [
    ["zoom2d"],
    ["zoomIn2d"],
    ["zoomOut2d"],
    ["autoScale2d"],
    ["select2d"],
    ["drawcircle"]
  ],
  displaylogo: false,
  displayModeBar: true
};
Plotly.newPlot('plot', data, layout, config);

plot.on("plotly_selected", (data) => {
  console.log(data);
});
plot.on('plotly_click', function(data) {
  console.log({x: data.points[0].x, y: data.points[0].y, z: data.points[0].z});
});

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="plot"></div>