Bug description

When dimensions of line chart spans multiple pages, selecting an item from another page redirects me to the first page, regardless of whether the orientation is top or left. See the video below.

Screenshots/recordings

https://github.com/user-attachments/assets/1a4a722d-b053-4f0f-b3b9-7be26839e30d

Superset version

4.1.1

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

  • [x] I have searched Superset docs and Slack and didn't find a solution to my problem.
  • [x] I have searched the GitHub issue tracker and didn't find a similar bug report.
  • [x] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

Comment From: dosubot[bot]

The issue you're experiencing, where the line chart legend resets to the first page when selecting a dimension on another page, seems to be related to how the legend state is managed in the Superset line chart component. Unfortunately, I couldn't find specific information in the repository about the logic behind resetting the legend to the first page or how pagination is implemented in the legend.

However, the event handlers legendselectchanged, legendselectall, and legendinverseselect are triggered when a dimension is selected in the legend. These handlers call the onLegendStateChanged function with the payload.selected parameter, which might be related to the behavior you're observing [1].

To address this issue, you might want to investigate how the onLegendStateChanged function is implemented and whether it affects the pagination state. Additionally, reviewing the component's state management logic, particularly how it handles legend interactions, could provide insights into why the legend resets to the first page.

To continue talking to Dosu, mention @dosu.

Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

Comment From: mistercrunch

Wondering if that's an echarts or Superset bug (?) You may be able to recreate here in the JS playground -> https://echarts.apache.org/examples/en/editor.html?c=line-simple

Comment From: iercan

@mistercrunch I couldn't reproduce the same bug in ECharts; it seems to be a superset issue.

Comment From: iercan

Here is example data to anyone want to try

option = {
  legend: {
    orient: 'horizontal', // Horizontal layout for the legend
    top: 'top', // Positioned at the top of the chart
    type: 'scroll', // Enable scrolling for large legends
    selector: [
      {
        type: 'all', // "All" button to select all series
        title: 'All' // Button label
      },
      {
        type: 'inverse', // "Inverse" button to invert the selection
        title: 'Inverse' // Button label
      }
    ]
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Dimension 1',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    },
    {
      name: 'Dimension 2',
      data: [180, 200, 240, 210, 150, 160, 300],
      type: 'line'
    },
    {
      name: 'Dimension 3',
      data: [170, 220, 210, 225, 145, 155, 270],
      type: 'line'
    },
    {
      name: 'Dimension 4',
      data: [160, 210, 230, 200, 140, 150, 280],
      type: 'line'
    },
    {
      name: 'Dimension 5',
      data: [175, 215, 245, 230, 155, 170, 320],
      type: 'line'
    },
    {
      name: 'Dimension 6',
      data: [130, 200, 220, 240, 125, 140, 310],
      type: 'line'
    },
    {
      name: 'Dimension 7',
      data: [140, 205, 210, 260, 130, 150, 295],
      type: 'line'
    },
    {
      name: 'Dimension 8',
      data: [200, 240, 230, 210, 160, 180, 340],
      type: 'line'
    },
    {
      name: 'Dimension 9',
      data: [190, 220, 215, 205, 150, 165, 330],
      type: 'line'
    },
    {
      name: 'Dimension 10',
      data: [185, 230, 225, 215, 140, 155, 310],
      type: 'line'
    },
    {
      name: 'Dimension 11',
      data: [220, 245, 230, 215, 180, 190, 360],
      type: 'line'
    },
    {
      name: 'Dimension 12',
      data: [210, 230, 240, 220, 175, 185, 350],
      type: 'line'
    },
    {
      name: 'Dimension 13',
      data: [200, 225, 235, 225, 185, 195, 370],
      type: 'line'
    },
    {
      name: 'Dimension 14',
      data: [190, 220, 230, 230, 180, 175, 340],
      type: 'line'
    },
    {
      name: 'Dimension 15',
      data: [180, 215, 225, 235, 170, 165, 320],
      type: 'line'
    },
    {
      name: 'Dimension 16',
      data: [175, 210, 220, 240, 165, 160, 330],
      type: 'line'
    },
    {
      name: 'Dimension 17',
      data: [170, 205, 215, 245, 160, 155, 325],
      type: 'line'
    },
    {
      name: 'Dimension 18',
      data: [165, 200, 210, 250, 155, 150, 315],
      type: 'line'
    },
    {
      name: 'Dimension 19',
      data: [160, 195, 205, 255, 150, 145, 300],
      type: 'line'
    },
    {
      name: 'Dimension 20',
      data: [155, 190, 200, 260, 140, 135, 290],
      type: 'line'
    }
  ]
};

Comment From: mistercrunch

Thank you for taking the time to do this. Seems someone needs to dig in the css / configuration of the echarts viz plugin to see what's wrong in there.

Comment From: rusackas

Just gave AI a shot at this one for sport... we'll see how the PR does, but it looks pretty sensible!