State is undefined in dashboardFilters.js

Emitting filter from a plugin leads to a TypeError: Cannot read property 'columns' of undefined exception incubator-superset/superset-frontend/src/dashboard/reducers/dashboardFilters.js line 110.

The same issue seems to happen with incubator-superset 0.37.2 table plugin when you enable the emit filter functionality.

Expected results

No exception and filter being emitted.

Actual results

Exception: TypeError: Cannot read property 'columns' of undefined exception incubator-superset/superset-frontend/src/dashboard/reducers/dashboardFilters.js line 110

Screenshots

How to reproduce the bug

1. Pull incubator-superset 39cce712afdc00af73daa2243cbae08a14b7dc0e
2. Go to data > datasets
3. Select birth_names
4. Select customize > emit filter evens
5. Select Data > GROUP BY and add fields gender and name
6. Run query
7. Save as tblNames and add to new dashboard dbNames
8. Go to dashboard
9. Open browser console
10. Click any of the cells in the table
11. Observe the following error

Uncaught TypeError: Cannot read property 'columns' of undefined
    at Object.CHANGE_FILTER (dashboardFilters.js?12c8:105)
    at dashboardFiltersReducer (dashboardFilters.js?12c8:169)
    at combination (combineReducers.js?89a8:120)
    at dispatch (createStore.js?61ed:165)
    at eval (loggerMiddleware.js?7f0c:68)
    at eval (index.js?b083:11)
    at dispatch (applyMiddleware.js?05f2:35)
    at eval (dashboardFilters.js?1bd4:50)
    at eval (index.js?b083:8)
    at Object.eval [as changeFilter] (bindActionCreators.js?f901:3)
CHANGE_FILTER @ dashboardFilters.js?12c8:105
dashboardFiltersReducer @ dashboardFilters.js?12c8:169
combination @ combineReducers.js?89a8:120
dispatch @ createStore.js?61ed:165
eval @ loggerMiddleware.js?7f0c:68
eval @ index.js?b083:11
dispatch @ applyMiddleware.js?05f2:35
eval @ dashboardFilters.js?1bd4:50
eval @ index.js?b083:8
eval @ bindActionCreators.js?f901:3
changeFilter @ Chart.jsx?484f:192
changeFilter @ react-hot-loader.development.js?c2cb:714
handleAddFilter @ ChartRenderer.jsx?b661:103
handleAddFilter @ react-hot-loader.development.js?c2cb:714
toggleFilter @ TableChart.js?8bc0:178
Cell.cellProps.onClick @ TableChart.js?8bc0:222
callCallback @ react-dom.development.js?7f13:189
invokeGuardedCallbackDev @ react-dom.development.js?7f13:238
invokeGuardedCallback @ react-dom.development.js?7f13:293
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js?7f13:307
executeDispatch @ react-dom.development.js?7f13:390
executeDispatchesInOrder @ react-dom.development.js?7f13:412
executeDispatchesAndRelease @ react-dom.development.js?7f13:3279
executeDispatchesAndReleaseTopLevel @ react-dom.development.js?7f13:3288
forEachAccumulated @ react-dom.development.js?7f13:3260
runEventsInBatch @ react-dom.development.js?7f13:3305
runExtractedPluginEventsInBatch @ react-dom.development.js?7f13:3515
handleTopLevel @ react-dom.development.js?7f13:3559
batchedEventUpdates$1 @ react-dom.development.js?7f13:21903
batchedEventUpdates @ react-dom.development.js?7f13:1061
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js?7f13:3569
attemptToDispatchEvent @ react-dom.development.js?7f13:4268
dispatchEvent @ react-dom.development.js?7f13:4190
unstable_runWithPriority @ scheduler.development.js?b589:653
runWithPriority$1 @ react-dom.development.js?7f13:11062
discreteUpdates$1 @ react-dom.development.js?7f13:21919
discreteUpdates @ react-dom.development.js?7f13:1072
dispatchDiscreteEvent @ react-dom.development.js?7f13:4169
Show 8 more frames

Environment

• superset version: 39cce712afdc00af73daa2243cbae08a14b7dc0e
• also replicable with superset version: 0.37.2
• python version: Python 2.7.17
• node.js version: v12.18.4
• npm version: 6.14.6

Checklist

Make sure these boxes are checked before submitting your issue - thank you!

• 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.

Additional context

I may be able to fix this myself if you just give me proper context so that I know where to look.

[codepic]

@villebro kiitos 😉

@suddjian Actually, I already found out that the FilterBoxItemControl emits filter_configs array when added to controlPanel so I tried the following:

in incubator-superset/superset-frontend/src/dashboard/reducers/dashboardState.js

index d9ddc59cd..a0c5bb7d6 100644
--- a/superset-frontend/src/dashboard/reducers/getInitialState.js
+++ b/superset-frontend/src/dashboard/reducers/getInitialState.js
@@ -169,7 +169,7 @@ export default function getInitialState(bootstrapData) {
     }
 
     // build DashboardFilters for interactive filter features
-    if (slice.form_data.viz_type === 'filter_box') {
+    if (slice.form_data.filter_configs && slice.form_data.filter_configs.length > 0) {
       const configs = getFilterConfigsFromFormdata(slice.form_data);
       let { columns } = configs;
       const { labels } = configs;

and in incubator-superset/superset-frontend/src/dashboard/actions/dashboardState.js

index 593ca4d78..da793c938 100644
--- a/superset-frontend/src/dashboard/actions/dashboardState.js
+++ b/superset-frontend/src/dashboard/actions/dashboardState.js
@@ -284,7 +284,7 @@ export function addSliceToDashboard(id, component) {
     ]).then(() => {
       dispatch(addSlice(selectedSlice));
 
-      if (selectedSlice && selectedSlice.viz_type === 'filter_box') {
+      if (selectedSlice && form_data.filter_configs && form_data.filter_configs.length > 0) {
         dispatch(addFilter(id, component, selectedSlice.form_data));
       }
     });
@@ -294,7 +294,7 @@ export function addSliceToDashboard(id, component) {
 export function removeSliceFromDashboard(id) {
   return (dispatch, getState) => {
     const sliceEntity = getState().sliceEntities.slices[id];
-    if (sliceEntity && sliceEntity.viz_type === 'filter_box') {
+    if (sliceEntity && sliceEntity.form_data.filter_configs && sliceEntity.form_data.filter_configs.length > 0) {
       dispatch(removeFilter(id));
     }

And for my surprise, I didn’t break the FilterBox plugin and my plugin works 😄

In any case @villebro, I will drop by the Superset Slack workspace a little bit later as I have this to prepare for our visualization meeting and see what they think of it.

[amitmiran137]

dashboard filters totally got refactored, you should check out the DASHBOARD_NATIVE_FILTERS ff and the DASHBOARD_CROSS_FILTERS ff we will probably soon introduce emitting filter from existing plugins