Skip to content

fix: re-enable table filter #9593

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ktmud wants to merge 2 commits into from
Closed

fix: re-enable table filter #9593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
61100b4
Re-enable table filter
ktmud Apr 20, 2020
3345016
Fix linter
ktmud Aug 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions superset-frontend/src/dashboard/actions/dashboardState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import {
import { UPDATE_COMPONENTS_PARENTS_LIST } from '../actions/dashboardLayout';
import serializeActiveFilterValues from '../util/serializeActiveFilterValues';
import serializeFilterScopes from '../util/serializeFilterScopes';
import isFilterChart from '../util/isFilterChart';
import { getActiveFilters } from '../util/activeDashboardFilters';
import { safeStringify } from '../../utils/safeStringify';

Expand Down Expand Up @@ -285,7 +286,7 @@ export function addSliceToDashboard(id, component) {
]).then(() => {
dispatch(addSlice(selectedSlice));

if (selectedSlice && selectedSlice.viz_type === 'filter_box') {
if (selectedSlice && isFilterChart(selectedSlice)) {
dispatch(addFilter(id, component, selectedSlice.form_data));
}
});
Expand All @@ -295,7 +296,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 && isFilterChart(sliceEntity)) {
dispatch(removeFilter(id));
}

Expand Down
44 changes: 18 additions & 26 deletions superset-frontend/src/dashboard/reducers/getInitialState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import getEmptyLayout from '../util/getEmptyLayout';
import getFilterConfigsFromFormdata from '../util/getFilterConfigsFromFormdata';
import getLocationHash from '../util/getLocationHash';
import newComponentFactory from '../util/newComponentFactory';
import isFilterChart from '../util/isFilterChart';
import { TIME_RANGE } from '../../visualizations/FilterBox/FilterBox';

export default function (bootstrapData) {
Expand Down Expand Up @@ -107,7 +108,7 @@ export default function (bootstrapData) {
const slices = {};
const sliceIds = new Set();
dashboard.slices.forEach(slice => {
const key = slice.slice_id;
const sliceId = slice.slice_id;
if (['separator', 'markup'].indexOf(slice.form_data.viz_type) === -1) {
const form_data = {
...slice.form_data,
Expand All @@ -116,15 +117,15 @@ export default function (bootstrapData) {
...urlParams,
},
};
chartQueries[key] = {
chartQueries[sliceId] = {
...chart,
id: key,
id: sliceId,
form_data,
formData: applyDefaultFormData(form_data),
};

slices[key] = {
slice_id: key,
slices[sliceId] = {
slice_id: sliceId,
slice_url: slice.slice_url,
slice_name: slice.slice_name,
form_data: slice.form_data,
Expand All @@ -138,10 +139,10 @@ export default function (bootstrapData) {
changed_on: new Date(slice.changed_on).getTime(),
};

sliceIds.add(key);
sliceIds.add(sliceId);

// if there are newly added slices from explore view, fill slices into 1 or more rows
if (!chartIdToLayoutId[key] && layout[parentId]) {
if (!chartIdToLayoutId[sliceId] && layout[parentId]) {
if (
newSlicesContainerWidth === 0 ||
newSlicesContainerWidth + GRID_DEFAULT_CHART_WIDTH > GRID_COLUMN_COUNT
Expand Down Expand Up @@ -170,24 +171,15 @@ export default function (bootstrapData) {
}

// build DashboardFilters for interactive filter features
if (slice.form_data.viz_type === 'filter_box') {
const configs = getFilterConfigsFromFormdata(slice.form_data);
let columns = configs.columns;
const labels = configs.labels;
if (preselectFilters[key]) {
Object.keys(columns).forEach(col => {
if (preselectFilters[key][col]) {
columns = {
...columns,
[col]: preselectFilters[key][col],
};
}
});
}
if (isFilterChart(slice)) {
const { columns, labels } = getFilterConfigsFromFormdata(
slice.form_data,
preselectFilters[sliceId],
);

const scopesByChartId = Object.keys(columns).reduce((map, column) => {
const scopeSettings = {
...filterScopes[key],
...filterScopes[sliceId],
};
const { scope, immune } = {
...DASHBOARD_FILTER_SCOPE_GLOBAL,
Expand All @@ -203,12 +195,12 @@ export default function (bootstrapData) {
};
}, {});

const componentId = chartIdToLayoutId[key];
const componentId = chartIdToLayoutId[sliceId];
const directPathToFilter = (layout[componentId].parents || []).slice();
directPathToFilter.push(componentId);
dashboardFilters[key] = {
dashboardFilters[sliceId] = {
...dashboardFilter,
chartId: key,
chartId: sliceId,
componentId,
datasourceId: slice.form_data.datasource,
filterName: slice.slice_name,
Expand All @@ -225,7 +217,7 @@ export default function (bootstrapData) {
// sync layout names with current slice names in case a slice was edited
// in explore since the layout was updated. name updates go through layout for undo/redo
// functionality and python updates slice names based on layout upon dashboard save
const layoutId = chartIdToLayoutId[key];
const layoutId = chartIdToLayoutId[sliceId];
if (layoutId && layout[layoutId]) {
layout[layoutId].meta.sliceName = slice.slice_name;
}
Expand Down
130 changes: 60 additions & 70 deletions superset-frontend/src/dashboard/util/getFilterConfigsFromFormdata.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,29 @@
*/
/* eslint-disable camelcase */
import { TIME_FILTER_MAP } from '../../visualizations/FilterBox/FilterBox';
import {
FILTER_CONFIG_ATTRIBUTES,
TIME_FILTER_LABELS,
} from '../../explore/constants';
import { TIME_FILTER_LABELS } from '../../explore/constants';

export default function getFilterConfigsFromFormdata(form_data = {}) {
/**
* Parse filters for Table chart. All non-metric columns are considered
* filterable values.
*/
function getFilterConfigsFromTableChart(form_data = {}) {
const { groupby = [], all_columns = [] } = form_data;
const configs = { columns: {}, labels: {} };
// `groupby` is from GROUP BY mode (aggregations)
// `all_columns` is from NOT GROUP BY mode (raw records)
const columns = groupby.concat(all_columns);
columns.forEach(column => {
configs.columns[column] = undefined;
Copy link
Contributor

@williaster williaster Apr 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would null be better here? seems like that might match the filterbox empty value? to me that's more an explicit "undefined" versus undefined

Copy link
Member Author

@ktmud ktmud Apr 20, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To me, null means users specifically choose an empty value for the filter. undefined is more like the "data not yet available" default.

In FilterBox, the defaultValue is also undefined, not null:

Since there is no way to set a default filter for table charts, using undefined to indicate "not set" seems more appropriate to me.

configs.labels[column] = column;
});
return configs;
}

/**
* Parse filter configs for FilterBox.
*/
function getFilterConfigsFromFilterBox(form_data = {}) {
const {
date_filter,
filter_configs = [],
Expand All @@ -32,83 +49,56 @@ export default function getFilterConfigsFromFormdata(form_data = {}) {
show_sqla_time_column,
show_sqla_time_granularity,
} = form_data;
let configs = filter_configs.reduce(
({ columns, labels }, config) => {
let defaultValues = config[FILTER_CONFIG_ATTRIBUTES.DEFAULT_VALUE];
// defaultValue could be ; separated values,
// could be null or ''
if (
config[FILTER_CONFIG_ATTRIBUTES.DEFAULT_VALUE] &&
config[FILTER_CONFIG_ATTRIBUTES.MULTIPLE]
) {
defaultValues = config.defaultValue.split(';');
}
const updatedColumns = {
...columns,
[config.column]: config.vals || defaultValues,
};
const updatedLabels = {
...labels,
[config.column]: config.label,
};
const configs = { columns: {}, labels: {} };

return {
columns: updatedColumns,
labels: updatedLabels,
};
},
{ columns: {}, labels: {} },
);
filter_configs.forEach(({ column, label, defaultValue, multiple, vals }) => {
// treat empty string as undefined, too
const defaultValues =
multiple && defaultValue ? defaultValue.split(';') : defaultValue;
configs.columns[column] = vals || defaultValues;
configs.labels[column] = label;
});

if (date_filter) {
let updatedColumns = {
...configs.columns,
[TIME_FILTER_MAP.time_range]: form_data.time_range,
};
const updatedLabels = {
...configs.labels,
...Object.entries(TIME_FILTER_MAP).reduce(
(map, [key, value]) => ({
...map,
[value]: TIME_FILTER_LABELS[key],
}),
{},
),
};
Copy link
Member Author

@ktmud ktmud Apr 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reduce is confusing. We should avoid reduce: https://twitter.com/jaffathecake/status/1213077702300852224

@graceguo-supercat

Copy link

@graceguo-supercat graceguo-supercat Apr 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel everyday in the internet there will someone claim one or another new theory...🤷‍♀️
I saw so many ppl object to his opinion. Did he offer any reason WHY he made claim?

Copy link
Member Author

@ktmud ktmud Apr 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reduce code is often very difficult to read and plain old for loops or forEach functions are almost always easier to understand.

Programs should favor simplicity and clarity, not succinctness.

This guy works for Google and is in charge of promoting new browser features such as Service Workers.

Copy link
Contributor

@natalierue natalierue Aug 7, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ktmud Realize this is old, but wanted to add my 2cents. Performance considerations aside, I find reduce to frequently be faster to write and more readable than for loops and forEach. The key reasons being that I can cognitively follow the steps in sequence by knowing the goal is to turn A into Z, which means somewhere along the chain, I must take that step to go from A to C. As soon as that becomes imperative, I lose the ability to follow it sequentially since variables, intermediary steps, etc. must be declared up front. This leads me to have to make assumptions about what the purpose of the code is to understand the context of what I'm looking at. In a similar vein, that's why I typically hate non-curried underscore / lodash, because it reverses the call order and makes you start at the innermost function call.

That being said, the real reason why we write code that way is to have the ability to write it to pause / resume execution at any point in the chain (i.e. generators).

Copy link
Member Author

@ktmud ktmud Aug 7, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interestingly, I find reduce harder to read also because I was not able to follow it sequentially. It kind of places the input and output in a very twisted flow:

input.reduce((intermediateOutput, input) => {
   return intermediateOutput
}, output);

Maybe I just didn't use it often enough, but every time I encounter a reduce function, I always have to think what the output look like and sometimes it could even be difficult to find where the output object was initialized.

For this specific case, the original code looks like this:

    const updatedLabels  = {
      ...configs.labels,
      ...Object.entries(TIME_FILTER_MAP).reduce(
        (map, [key, value]) => ({
          ...map,
          [value]: TIME_FILTER_LABELS[key],
        }),
        {},
      ),
    };
    configs.labels = updatedLabels;

Without reduce, it's just:

    Object.entries(TIME_FILTER_MAP).forEach(([key, column]) => {
      configs.labels[column] = TIME_FILTER_LABELS[key];
    });

Is reduce really faster to write and read?


configs.columns[TIME_FILTER_MAP.time_range] = form_data.time_range;
// a map from frontend enum key to backend column
Object.entries(TIME_FILTER_MAP).forEach(([key, column]) => {
configs.labels[column] = TIME_FILTER_LABELS[key];
});
if (show_sqla_time_granularity) {
updatedColumns = {
...updatedColumns,
[TIME_FILTER_MAP.time_grain_sqla]: form_data.time_grain_sqla,
};
configs.columns[TIME_FILTER_MAP.time_grain_sqla] =
form_data.time_grain_sqla;
}

if (show_sqla_time_column) {
updatedColumns = {
...updatedColumns,
[TIME_FILTER_MAP.granularity_sqla]: form_data.granularity_sqla,
};
configs.columns[TIME_FILTER_MAP.granularity_sqla] =
form_data.granularity_sqla;
}

if (show_druid_time_granularity) {
updatedColumns = {
...updatedColumns,
[TIME_FILTER_MAP.granularity]: form_data.granularity,
};
configs.columns[TIME_FILTER_MAP.granularity] = form_data.granularity;
}

if (show_druid_time_origin) {
updatedColumns = {
...updatedColumns,
[TIME_FILTER_MAP.druid_time_origin]: form_data.druid_time_origin,
};
configs.columns[TIME_FILTER_MAP.druid_time_origin] =
form_data.druid_time_origin;
}
}
return configs;
}

configs = {
...configs,
columns: updatedColumns,
labels: updatedLabels,
};
export default function getFilterConfigsFromFormdata(
form_data = {},
filters = undefined,
) {
const configs = form_data.table_filter
? getFilterConfigsFromTableChart(form_data)
: getFilterConfigsFromFilterBox(form_data);

// if current chart has preselected filters, update it
if (filters) {
Copy link

@graceguo-supercat graceguo-supercat Apr 21, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this function getFilterConfigsFromFormdata, is used when dashboard get loaded in browser, and when user apply a filter. By adding this code block, will user applied filter will always be overwritten by dashboard preselected filters?

Copy link
Member Author

@ktmud ktmud Apr 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I don’t think this is actually in use. It comes from my previous attempt with some larger refactoring, which didn’t work out in the end. Will clean this up.

Object.keys(filters).forEach(column => {
if (column in configs.columns && filters[column]) {
configs.columns[column] = filters[column];
}
});
}
return configs;
}
31 changes: 31 additions & 0 deletions superset-frontend/src/dashboard/util/isFilterChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable camelcase */

/**
* Check if a chart is one of the filter chart types, i.e., FilterBox
* and any charts with `table_filter = TRUE`.
Copy link

@graceguo-supercat graceguo-supercat Apr 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even the chart is not a table viz, it can still have table_filter = TRUE? this sounds very problematic. Does that mean any chart can be filter?

Copy link
Member Author

@ktmud ktmud Apr 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. That was how table filter was originally implemented. I think it’s probably OK. Tableau also has this feature where you can filter/highlight by categorical values from linked charts.

Copy link

@graceguo-supercat graceguo-supercat Apr 21, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but in the code you only have getFilterConfigsFromTableChart and getFilterConfigsFromFilterBox right? So only 2 viz types are eligible to work as filter.

Copy link
Member Author

@ktmud ktmud Apr 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now. But the design should account for generic cases, which is why I proposed to change “table_filter” to a more generic name. Current implementation also tightly couple viz type with the filters, which kind of goes against our goal of making visualizations more pluggable. But we can deal with that one at a time.

*
* TODO: change `table_filter` to a more generic name.
*/
export default function isFilterChart(slice) {
const { form_data = {} } = slice;
const vizType = slice.viz_type || form_data.viz_type;
return vizType === 'filter_box' || !!form_data.table_filter;
}
4 changes: 0 additions & 4 deletions superset-frontend/stylesheets/superset.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -546,10 +546,6 @@ tr.reactable-column-header th.reactable-header-sortable {
text-align: right;
}

td.filtered {
background-color: lighten(desaturate(@brand-primary, 50%), 50%);
}

.table-name {
font-size: @font-size-l;
}
Expand Down