Hi, I’m encountering a warning when selecting a region then adding annotations in my Plotly React component. The problem is that when I select a box and add annotations, I get the warning in the browser console:
hook.js:608 WARN: unrecognized GUI edit: selections[0].y1
hook.js:608 WARN: unrecognized GUI edit: selections[0].x1
…
My Questions:
- Why am I seeing this warning in the console?
- How can I fix this issue, or is there a way to suppress or ignore the warning?
- Is this related to Plotly’s internal behavior when dealing with selections and annotations?
Here’s the relevant code for my implementation:
'use client';
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
const ScatterPlotWithSelections = () => {
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const [data, setData] = useState([
{
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
y: [3, 4, 5, 2, 6, 7, 4, 5, 8, 6, 9, 7],
type: 'scatter',
mode: 'markers',
name: '2014',
text: months,
marker: { color: 'rgba(200, 50, 100, .7)', size: 16 },
},
{
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
y: [2, 5, 4, 7, 6, 3, 8, 9, 5, 4, 6, 7],
type: 'scatter',
mode: 'markers',
name: '2015',
text: months,
marker: { color: 'rgba(120, 20, 130, .7)', size: 16 },
},
{
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
y: [4, 3, 6, 8, 7, 5, 9, 6, 4, 5, 8, 7],
type: 'scatter',
mode: 'markers',
name: '2016',
text: months,
marker: { color: 'rgba(10, 180, 180, .8)', size: 16 },
},
]);
const [layout, setLayout] = useState({
hovermode: 'closest',
dragmode: 'select',
title: {
text: '<b>Formatting Annotations</b> <br> Click on a point or select a region',
},
xaxis: {
zeroline: false,
title: { text: 'Value A' },
range: [0, 13], // Fixed x-axis range
},
yaxis: {
zeroline: false,
title: { text: 'Value B' },
range: [0, 10], // Fixed y-axis range
},
annotations: [],
});
const handlePointClick = (event) => {
const point = event.points[0];
const newAnnotation = {
x: point.x,
y: point.y,
arrowhead: 6,
ax: 0,
ay: -80,
bgcolor: 'rgba(255, 255, 255, 0.9)',
arrowcolor: point.fullData.marker.color,
font: { size: 12 },
bordercolor: point.fullData.marker.color,
borderwidth: 3,
borderpad: 4,
text: `
<i>Series Identification</i><br>
<b>Year:</b> ${point.data.name}<br>
<i>Point Identification</i><br>
<b>Month:</b> ${months[point.pointNumber]}<br>
<i>Point Values</i><br>
<b>A:</b> ${point.x.toPrecision(4)}<br>
<b>B:</b> ${point.y.toPrecision(4)}
`,
};
setLayout((prevLayout) => {
const existingAnnotations = prevLayout.annotations || [];
const exists = existingAnnotations.some((ann) => ann.text === newAnnotation.text);
if (exists) {
return {
...prevLayout,
annotations: existingAnnotations.filter((ann) => ann.text !== newAnnotation.text),
};
}
return {
...prevLayout,
annotations: [...existingAnnotations, newAnnotation],
};
});
};
const handleSelection = (event) => {
if (event && event.points) {
const selectedPoints = event.points.map((point) => ({
x: point.x,
y: point.y,
month: months[point.pointNumber],
year: point.data.name,
}));
console.log('Selected Data:', selectedPoints);
}
};
return (
<Plot
data={data}
layout={layout}
frames={frames}
config={config}
onInitialized={(figure) => {
setData(figure.data);
setLayout(figure.layout);
}}
onUpdate={(figure) => {
console.log(figure);
setData(figure.data);
setLayout(figure.layout);
}}
onClick={handlePointClick}
onSelected={handleSelection} // Handle region selection
/>
);
};
export default ScatterPlotWithSelections;