Unable to filter dimension in chart by double click - after update from Supserset 2.0.1 to 2.1.0

[PrinceGallywix]

After update to 2.1.0 from 2.0.1 we are unable to filter one line on chart with multiple dimensions via double clicking on it. (Does not depends on chart type: for example, Time-series Area chart and time-series bar chart had been tested).

It was very useful feature and all of our charts were depended on it (on version 2.0.1) - our users would simply double click on a single line to explore certain tendency rather then disabling every other line via navigation bar on top-right of the chart.

Are there any options to turn this feature back on?

How to reproduce the bug

1. Go to any chart (for example, 'Time-series Area chart') with multiple dimensions
2. Double click on a single row

Expected results

Only chosen dimension left on a chart

Actual results

Nothing happens, there are still multiple dimensions on a chart.

Environment

• browser type and version: Google Chrome 109.0.5414.120 (also tested on Firefox 111.0.1)
• superset version: superset 2.1.0
• python version: python 3.8.12
• node.js version: node 10.24.0

Checklist

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

[xupeng]

Same issue here.

[jaimefr]

Same issue too.

[stasDomb]

It's very convenient. When it will be fixed?
Thanks

[PrinceGallywix]

Well, I'm trying to find out the reason this feature isn't working.

I'm not a frontend developer and sorry for possible confusing, but here are some results:
Comparing 2.1.0 with 2.0.1 in debug mode will show that EchartInstance reference won't be got anymore, I guess the problem in the reference handler:

superset/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

Line 59 in 357745f

const echartRef = useRef<EchartsHandler | null>(null);

In 2.0.1 echartRef will be equal to ChartInstance object, but in 2.1.0 you will get undefined

@villebro I see some of your activities in this module. Do you have any ideas how to fix this bug? Could you share your thoughts, please?

As you can see, there are plenty of "DoubleClick feature" users :)

[rusackas]

The current era ECharts (line, area, or otherwise) don't have a double-click feature. That sounds like what existed on the "legacy" (deprecated) line charts based on NVD3. Those still exist on 2.1.0, but will be migrated in 3.0.

What is NOT release in 2.1.0, but is available on master and will be available in 3.0 as well, are the ECharts equivalent, the All and Inverse buttons you see here.

ECharts does not and will not support double click actions like this (they're not discoverable to new users, arguably), so we're supporting the ECharts-native solution instead.

Hope this explains the situation... I'll close this for now, but if I'm misinterpreting the issue, let me know and we can re-open.

[PrinceGallywix]

@rusackas thank you for reply! We are excited to try this newfeature with 'All' and 'Invert' buttons!

But I still don't get it...
The double click feature is described in EchartsTimeseries module (the link in my previous comment), which one is NOT marked as deprecated and implemented in Echarts module. So, double click feature is in ECharts as well, isn't it?

UPD: Here is the correct link to the function:

superset/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

Line 72 in 357745f

const handleDoubleClickChange = useCallback(

[rusackas]

@rusackas thank you for reply! We are excited to try this newfeature with 'All' and 'Invert' buttons!

But I still don't get it... The double click feature is described in EchartsTimeseries module (the link in my previous comment), which one is NOT marked as deprecated and implemented in Echarts module. So, double click feature is in ECharts as well, isn't it?

UPD: Here is the correct link to the function:

superset/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

Line 72 in 357745f

const handleDoubleClickChange = useCallback(

Yep, I see that in the code, and it looks like it ought to work, but I don't see it actually doing anything. That probably ought to be debugged or removed, one way or the other.

[PrinceGallywix]

@rusackas yep, it ought to work and it was OK in 2.0.1, but not in 2.1.0:

I've tryed to debug this feature, but then I got stuck. You can debug this in the next steps:

1. Open any time-series Echart (for example, open 'Time-series Bar Chart v2') with at least 2 dimensions,
2. Set a breakpoint on this line:
   

   superset/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

   Line 75 in 357745f

   if (!name) {

   
   (on the user side, the path is: webpack://superset/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx )
3. Double click on any bar (or on the name of dimention in annotation layer)
4. Ok, now you are paused on a breakpoint
5. Check out the echartInstance variable (which one is defined in the line above our debugging point). In 2.1.0 it is undefined. I guess this is the problem, the reference handler is broken somewhere, but I don't know where and how to fix it.

This is how it was looking like in 2.0.1:

In 2.1.0 we have undefined. This is because the echartRef is null, which one is defined a little above.

If you have any ideas about this bug, please share :)

I guess we can re-open this issue, because it's not deprecated and it would be very helpful for us to use it until 3.0 release

[PrinceGallywix]

Just for the record: this is where the feature is described and implemented previously:
#16354

[PrinceGallywix]

@rusackas Can we re-open the issue, please?

[michael-s-molina]

This was fixed in #24477 and will be available in 3.0

[Krknv]

@PrinceGallywix you can try to add ref={echartRef} to fix issue.

superset/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

Line 294 in 357745f

<Echart

<Echart
  ref={echartRef}
  refs={refs}
  height={height - extraControlHeight}
  width={width}
  echartOptions={echartOptions}
  eventHandlers={eventHandlers}
  zrEventHandlers={zrEventHandlers}
  selectedValues={selectedValues}
/>