ranges does not get computed when same data is used but Plot is updated

Đang mở
#326 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
48/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, plotly, react
Lĩnh vực
data-visualization, frontend

Hướng nghiên cứu

Bắt đầu với reproduction same_data được liên kết và theo dõi đường đi cập nhật của component Plot khi layout thay đổi nhưng data được sử dụng lại. So sánh các biến thể new_array và new_object để xác định hành vi chung. Hoàn tất khi các ranges vẫn được tính toán và thao tác zoom vẫn hoạt động sau khi nhấp vào Update Plot.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

If layout is change but data stays the same, Plot's ranges are not computed correctly.

Consider this React component

(full project can be found here: https://github.com/saad-learns/react-plotly/tree/same_data

function App() {
  const [plotUpdated, setPlotUpdated] = React.useState<number>(0);
  const [plotParams, setPlotParams] = React.useState<PlotParams>({
    data: [
      {
        x: [-3, -2, -1, 0, 1, 2, 3],
        y: [
          -0.1411200080598672, -0.9092974268256817, -0.8414709848078965, 0,
          0.8414709848078965, 0.9092974268256817, 0.1411200080598672,
        ],
      },
    ],
    layout: {},
  });

  const updatePlot = () => {
    setPlotParams((prevState) => ({
      data: prevState.data,
      layout: {},
    }));
  };

  return (
    <div className="App">
      <div style={{ padding: 10 }}>
        <button onClick={updatePlot}>Update Plot</button>
      </div>

      <Plot
        data={plotParams.data}
        layout={plotParams.layout}
        onUpdate={() => setPlotUpdated((prevState) => prevState + 1)}
      />

      <div>Plot updated: {plotUpdated}</div>
    </div>
  );

At the start, ranges are calculated correctly. You can verify that with React Dev Tool's Component tab:

image

Or you can use Zoom In and Zoom Out button to verify that zooming is working.

But if you click on the Update Plot button, the ranges are not computed, in fact they get removed:

image

Thereafter, zooming does not work.

Here, updatePlot will use the same data object, but makes use of a new layout. According to https://github.com/plotly/react-plotly.js#refreshing-the-plot Plot should be refreshed, and it does, but ranges are no longer computed correctly.

There are other variation of the above issue:

  1. Use a new array but same previous data element: https://github.com/saad-learns/react-plotly/blob/new_array/src/App.tsx
  2. Use a new array, and a new element but with same previous data: https://github.com/saad-learns/react-plotly/blob/new_object/src/App.tsx

where ranges are not computed properly.

Ngôn ngữ chính
JavaScript
Star
1.1k
Fork
138
Merge trung bình
3 ngày 2 giờ
Pull request đã merge (30 ngày)
4

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của plotly/react-plotly.js

Tất cả issue của plotly/react-plotly.js

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.