WARN: unrecognized GUI edit

plotly.js
1

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;