diff --git a/superset/assets/package-lock.json b/superset/assets/package-lock.json index 743952cdeea0..5e8aac3288f2 100644 --- a/superset/assets/package-lock.json +++ b/superset/assets/package-lock.json @@ -20244,6 +20244,17 @@ } } }, + "react-checkbox-tree": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/react-checkbox-tree/-/react-checkbox-tree-1.5.1.tgz", + "integrity": "sha512-fBLMVpd7/YXavzIBz+3OMS5eo2oZLW9PlTY4M1zrJ3TdZRzgILicSzRj6V5VKKm80y8uQXn60skn98pwn3i3Ig==", + "requires": { + "classnames": "^2.2.5", + "lodash": "^4.17.10", + "nanoid": "^2.0.0", + "prop-types": "^15.5.8" + } + }, "react-color": { "version": "2.14.1", "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.14.1.tgz", diff --git a/superset/assets/package.json b/superset/assets/package.json index c286ee7335cf..42b56b517e8e 100644 --- a/superset/assets/package.json +++ b/superset/assets/package.json @@ -117,6 +117,7 @@ "react-bootstrap": "^0.31.5", "react-bootstrap-dialog": "^0.10.0", "react-bootstrap-slider": "2.1.5", + "react-checkbox-tree": "^1.5.1", "react-color": "^2.13.8", "react-datetime": "^2.14.0", "react-dnd": "^2.5.4", diff --git a/superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardFilters.js b/superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardFilters.js index e72e13e09abf..7f13db721500 100644 --- a/superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardFilters.js +++ b/superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardFilters.js @@ -17,6 +17,7 @@ * under the License. */ import { filterId } from './mockSliceEntities'; +import { DASHBOARD_FILTER_SCOPE_GLOBAL } from '../../../../src/dashboard/reducers/dashboardFilters'; export const emptyFilters = {}; @@ -33,7 +34,9 @@ export const dashboardFilters = { 'ROW-l6PrlhwSjh', 'CHART-rwDfbGqeEn', ], - scope: 'ROOT_ID', + scopes: { + region: DASHBOARD_FILTER_SCOPE_GLOBAL, + }, isDateFilter: false, isInstantFilter: true, columns: { diff --git a/superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardLayout.js b/superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardLayout.js index aad44452ff84..3267c5c7ecc5 100644 --- a/superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardLayout.js +++ b/superset/assets/spec/javascripts/dashboard/fixtures/mockDashboardLayout.js @@ -204,6 +204,6 @@ export const filterComponent = { chartId: filterId, width: 3, height: 10, - chartName: 'Filter', + sliceName: 'Filter', }, }; diff --git a/superset/assets/spec/javascripts/dashboard/reducers/dashboardFilters_spec.js b/superset/assets/spec/javascripts/dashboard/reducers/dashboardFilters_spec.js index 88c67140a51d..e234248ce3bc 100644 --- a/superset/assets/spec/javascripts/dashboard/reducers/dashboardFilters_spec.js +++ b/superset/assets/spec/javascripts/dashboard/reducers/dashboardFilters_spec.js @@ -22,7 +22,9 @@ import { REMOVE_FILTER, CHANGE_FILTER, } from '../../../../src/dashboard/actions/dashboardFilters'; -import dashboardFiltersReducer from '../../../../src/dashboard/reducers/dashboardFilters'; +import dashboardFiltersReducer, { + DASHBOARD_FILTER_SCOPE_GLOBAL, +} from '../../../../src/dashboard/reducers/dashboardFilters'; import { emptyFilters, dashboardFilters, @@ -33,7 +35,6 @@ import { column, } from '../fixtures/mockSliceEntities'; import { filterComponent } from '../fixtures/mockDashboardLayout'; -import { DASHBOARD_ROOT_ID } from '../../../../src/dashboard/util/constants'; describe('dashboardFilters reducer', () => { const form_data = sliceEntitiesForDashboard.slices[filterId].form_data; @@ -54,7 +55,7 @@ describe('dashboardFilters reducer', () => { chartId: filterId, componentId: component.id, directPathToFilter, - scope: DASHBOARD_ROOT_ID, + filterName: component.meta.sliceName, isDateFilter: false, isInstantFilter: !!form_data.instant_filtering, columns: { @@ -63,6 +64,9 @@ describe('dashboardFilters reducer', () => { labels: { [column]: column, }, + scopes: { + [column]: DASHBOARD_FILTER_SCOPE_GLOBAL, + }, }, }); }); @@ -83,7 +87,6 @@ describe('dashboardFilters reducer', () => { chartId: filterId, componentId: component.id, directPathToFilter, - scope: DASHBOARD_ROOT_ID, isDateFilter: false, isInstantFilter: !!form_data.instant_filtering, columns: { @@ -93,6 +96,9 @@ describe('dashboardFilters reducer', () => { labels: { [column]: column, }, + scopes: { + [column]: DASHBOARD_FILTER_SCOPE_GLOBAL, + }, }, }); }); @@ -113,7 +119,6 @@ describe('dashboardFilters reducer', () => { chartId: filterId, componentId: component.id, directPathToFilter, - scope: DASHBOARD_ROOT_ID, isDateFilter: false, isInstantFilter: !!form_data.instant_filtering, columns: { @@ -123,6 +128,9 @@ describe('dashboardFilters reducer', () => { labels: { [column]: column, }, + scopes: { + [column]: DASHBOARD_FILTER_SCOPE_GLOBAL, + }, }, }); }); diff --git a/superset/assets/src/components/ChartIcon.jsx b/superset/assets/src/components/ChartIcon.jsx new file mode 100644 index 000000000000..d25e4536e39b --- /dev/null +++ b/superset/assets/src/components/ChartIcon.jsx @@ -0,0 +1,30 @@ +/** + * 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. + */ +import React from 'react'; + +const ChartIcon = () => ( + + + + + + +); + +export default ChartIcon; diff --git a/superset/assets/src/components/CheckboxIcons.jsx b/superset/assets/src/components/CheckboxIcons.jsx new file mode 100644 index 000000000000..f26e75255a8f --- /dev/null +++ b/superset/assets/src/components/CheckboxIcons.jsx @@ -0,0 +1,40 @@ +/** + * 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. + */ +import React from 'react'; + +export const CheckboxChecked = () => ( + + + + +); + +export const CheckboxHalfChecked = () => ( + + + + +); + +export const CheckboxUnchecked = () => ( + + + + +); diff --git a/superset/assets/src/components/ModalTrigger.jsx b/superset/assets/src/components/ModalTrigger.jsx index 750be522f262..8f363f583b28 100644 --- a/superset/assets/src/components/ModalTrigger.jsx +++ b/superset/assets/src/components/ModalTrigger.jsx @@ -24,6 +24,7 @@ import cx from 'classnames'; import Button from './Button'; const propTypes = { + dialogClassName: PropTypes.string, animation: PropTypes.bool, triggerNode: PropTypes.node.isRequired, modalTitle: PropTypes.node, @@ -72,6 +73,7 @@ export default class ModalTrigger extends React.Component { renderModal() { return ( +

{t('Delete dashboard tab?')}

Deleting a tab will remove all content within it. You may still reverse this action with the undo button (cmd + z) until you save your changes.
-
+
)} @@ -361,6 +362,12 @@ class Header extends React.PureComponent { )} + {editMode && ( + {t('Filters')}} + /> + )} + {editMode && hasUnsavedChanges && (
+ } + /> + ); + } +} + +FilterScopeModal.propTypes = propTypes; diff --git a/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx b/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx new file mode 100644 index 000000000000..ae42a57c835d --- /dev/null +++ b/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx @@ -0,0 +1,518 @@ +/** + * 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. + */ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import { Button } from 'react-bootstrap'; +import { t } from '@superset-ui/translation'; + +import buildFilterScopeTreeEntry from '../../util/buildFilterScopeTreeEntry'; +import getFilterScopeNodesTree from '../../util/getFilterScopeNodesTree'; +import getFilterFieldNodesTree from '../../util/getFilterFieldNodesTree'; +import getFilterScopeParentNodes from '../../util/getFilterScopeParentNodes'; +import getCurrentScopeChartIds from '../../util/getCurrentScopeChartIds'; +import getKeyForFilterScopeTree from '../../util/getKeyForFilterScopeTree'; +import getSelectedChartIdForFilterScopeTree from '../../util/getSelectedChartIdForFilterScopeTree'; +import getRevertedFilterScope from '../../util/getRevertedFilterScope'; +import FilterScopeTree from './FilterScopeTree'; +import FilterFieldTree from './FilterFieldTree'; +import { + getChartIdAndColumnFromFilterKey, + getDashboardFilterKey, +} from '../../util/getDashboardFilterKey'; +import { ALL_FILTERS_ROOT } from '../../util/constants'; + +const propTypes = { + dashboardFilters: PropTypes.object.isRequired, + layout: PropTypes.object.isRequired, + filterImmuneSlices: PropTypes.arrayOf(PropTypes.number).isRequired, + filterImmuneSliceFields: PropTypes.object.isRequired, + setDirectPathToChild: PropTypes.func.isRequired, + onCloseModal: PropTypes.func.isRequired, +}; + +export default class FilterScopeSelector extends React.PureComponent { + constructor(props) { + super(props); + + const { + dashboardFilters, + filterImmuneSlices, + filterImmuneSliceFields, + layout, + } = props; + + if (Object.keys(dashboardFilters).length > 0) { + // display filter fields in tree structure + const filterFieldNodes = getFilterFieldNodesTree({ + dashboardFilters, + }); + // filterFieldNodes root node is dashboard_root component, + // so that we can offer a select/deselect all link + const filtersNodes = filterFieldNodes[0].children; + this.allfilterFields = []; + filtersNodes.forEach(({ children }) => { + children.forEach(child => { + this.allfilterFields.push(child.value); + }); + }); + this.defaultFilterKey = filtersNodes[0].children[0].value; + + // build FilterScopeTree object for each filterKey + const filterScopeMap = Object.values(dashboardFilters).reduce( + (map, { chartId: filterId, columns }) => { + const filterScopeByChartId = Object.keys(columns).reduce( + (mapByChartId, columnName) => { + const filterKey = getDashboardFilterKey({ + chartId: filterId, + column: columnName, + }); + const nodes = getFilterScopeNodesTree({ + components: layout, + filterFields: [filterKey], + selectedChartId: filterId, + }); + const checked = getCurrentScopeChartIds({ + scopeComponentIds: ['ROOT_ID'], // dashboardFilters[chartId].scopes[columnName], + filterField: columnName, + filterImmuneSlices, + filterImmuneSliceFields, + components: layout, + }); + const expanded = getFilterScopeParentNodes(nodes, 1); + return { + ...mapByChartId, + [filterKey]: { + // unfiltered nodes + nodes, + // filtered nodes in display if searchText is not empty + nodesFiltered: [...nodes], + checked, + expanded, + }, + }; + }, + {}, + ); + + return { + ...map, + ...filterScopeByChartId, + }; + }, + {}, + ); + + // initial state: active defaultFilerKey + const { chartId } = getChartIdAndColumnFromFilterKey( + this.defaultFilterKey, + ); + const checkedFilterFields = []; + const activeFilterField = this.defaultFilterKey; + // expand defaultFilterKey in filter field tree + const expandedFilterIds = [ALL_FILTERS_ROOT].concat(chartId); + + const filterScopeTreeEntry = buildFilterScopeTreeEntry({ + checkedFilterFields, + activeFilterField, + filterScopeMap, + layout, + }); + this.state = { + showSelector: true, + activeFilterField, + searchText: '', + filterScopeMap: { + ...filterScopeMap, + ...filterScopeTreeEntry, + }, + filterFieldNodes, + checkedFilterFields, + expandedFilterIds, + }; + } else { + this.state = { + showSelector: false, + }; + } + + this.filterNodes = this.filterNodes.bind(this); + this.onChangeFilterField = this.onChangeFilterField.bind(this); + this.onCheckFilterScope = this.onCheckFilterScope.bind(this); + this.onExpandFilterScope = this.onExpandFilterScope.bind(this); + this.onSearchInputChange = this.onSearchInputChange.bind(this); + this.onCheckFilterField = this.onCheckFilterField.bind(this); + this.onExpandFilterField = this.onExpandFilterField.bind(this); + this.onClose = this.onClose.bind(this); + this.onSave = this.onSave.bind(this); + } + + onCheckFilterScope(checked = []) { + const { + activeFilterField, + filterScopeMap, + checkedFilterFields, + } = this.state; + + const key = getKeyForFilterScopeTree({ + activeFilterField, + checkedFilterFields, + }); + const editingList = activeFilterField + ? [activeFilterField] + : checkedFilterFields; + const updatedEntry = { + ...filterScopeMap[key], + checked, + }; + + const updatedFilterScopeMap = getRevertedFilterScope({ + checked, + filterFields: editingList, + filterScopeMap, + }); + + this.setState(() => ({ + filterScopeMap: { + ...filterScopeMap, + ...updatedFilterScopeMap, + [key]: updatedEntry, + }, + })); + } + + onExpandFilterScope(expanded = []) { + const { + activeFilterField, + checkedFilterFields, + filterScopeMap, + } = this.state; + const key = getKeyForFilterScopeTree({ + activeFilterField, + checkedFilterFields, + }); + const updatedEntry = { + ...filterScopeMap[key], + expanded, + }; + this.setState(() => ({ + filterScopeMap: { + ...filterScopeMap, + [key]: updatedEntry, + }, + })); + } + + onCheckFilterField(checkedFilterFields = []) { + const { layout } = this.props; + const { filterScopeMap } = this.state; + const filterScopeTreeEntry = buildFilterScopeTreeEntry({ + checkedFilterFields, + activeFilterField: null, + filterScopeMap, + layout, + }); + + this.setState(() => ({ + activeFilterField: null, + checkedFilterFields, + filterScopeMap: { + ...filterScopeMap, + ...filterScopeTreeEntry, + }, + })); + } + + onExpandFilterField(expandedFilterIds = []) { + this.setState(() => ({ + expandedFilterIds, + })); + } + + onChangeFilterField(filterField = {}) { + const { layout } = this.props; + const nextActiveFilterField = filterField.value; + const { + activeFilterField: currentActiveFilterField, + checkedFilterFields, + filterScopeMap, + } = this.state; + + // we allow single edit and multiple edit in the same view. + // if user click on the single filter field, + // will show filter scope for the single field. + // if user click on the same filter filed again, + // will toggle off the single filter field, + // and allow multi-edit all checked filter fields. + if (nextActiveFilterField === currentActiveFilterField) { + const filterScopeTreeEntry = buildFilterScopeTreeEntry({ + checkedFilterFields, + activeFilterField: null, + filterScopeMap, + layout, + }); + + this.setState({ + activeFilterField: null, + filterScopeMap: { + ...filterScopeMap, + ...filterScopeTreeEntry, + }, + }); + } else if (this.allfilterFields.includes(nextActiveFilterField)) { + const filterScopeTreeEntry = buildFilterScopeTreeEntry({ + checkedFilterFields, + activeFilterField: nextActiveFilterField, + filterScopeMap, + layout, + }); + + this.setState({ + activeFilterField: nextActiveFilterField, + filterScopeMap: { + ...filterScopeMap, + ...filterScopeTreeEntry, + }, + }); + } + } + + onSearchInputChange(e) { + this.setState({ searchText: e.target.value }, this.filterTree); + } + + onClose() { + this.props.onCloseModal(); + } + + onSave() { + const { filterScopeMap } = this.state; + + console.log( + 'i am current state', + this.allfilterFields.reduce( + (map, key) => ({ + ...map, + [key]: filterScopeMap[key].checked, + }), + {}, + ), + ); + + // save does not close modal + } + + filterTree() { + // Reset nodes back to unfiltered state + if (!this.state.searchText) { + this.setState(prevState => { + const { + activeFilterField, + checkedFilterFields, + filterScopeMap, + } = prevState; + const key = getKeyForFilterScopeTree({ + activeFilterField, + checkedFilterFields, + }); + + const updatedEntry = { + ...filterScopeMap[key], + nodesFiltered: filterScopeMap[key].nodes, + }; + return { + filterScopeMap: { + ...filterScopeMap, + [key]: updatedEntry, + }, + }; + }); + } else { + const updater = prevState => { + const { + activeFilterField, + checkedFilterFields, + filterScopeMap, + } = prevState; + const key = getKeyForFilterScopeTree({ + activeFilterField, + checkedFilterFields, + }); + + const nodesFiltered = filterScopeMap[key].nodes.reduce( + this.filterNodes, + [], + ); + const expanded = getFilterScopeParentNodes([...nodesFiltered]); + const updatedEntry = { + ...filterScopeMap[key], + nodesFiltered, + expanded, + }; + + return { + filterScopeMap: { + ...filterScopeMap, + [key]: updatedEntry, + }, + }; + }; + + this.setState(updater); + } + } + + filterNodes(filtered = [], node = {}) { + const { searchText } = this.state; + const children = (node.children || []).reduce(this.filterNodes, []); + + if ( + // Node's label matches the search string + node.label.toLocaleLowerCase().indexOf(searchText.toLocaleLowerCase()) > + -1 || + // Or a children has a matching node + children.length + ) { + filtered.push({ ...node, children }); + } + + return filtered; + } + + renderFilterFieldList() { + const { + activeFilterField, + filterFieldNodes, + checkedFilterFields, + expandedFilterIds, + } = this.state; + return ( + + ); + } + + renderFilterScopeTree() { + const { + filterScopeMap, + activeFilterField, + checkedFilterFields, + searchText, + } = this.state; + + const key = getKeyForFilterScopeTree({ + activeFilterField, + checkedFilterFields, + }); + + const selectedChartId = getSelectedChartIdForFilterScopeTree({ + activeFilterField, + checkedFilterFields, + }); + return ( + + + + + ); + } + + renderEditingFiltersName() { + const { dashboardFilters } = this.props; + const { activeFilterField, checkedFilterFields } = this.state; + const currentFilterLabels = [] + .concat(activeFilterField || checkedFilterFields) + .map(key => { + const { chartId, column } = getChartIdAndColumnFromFilterKey(key); + return dashboardFilters[chartId].labels[column] || column; + }); + + return ( +
+ {currentFilterLabels.length === 0 && t('No filter is selected.')} + {currentFilterLabels.length === 1 && t('Editing 1 filter:')} + {currentFilterLabels.length > 1 && + t('Batch editing %d filters:', currentFilterLabels.length)} + + {currentFilterLabels.join(', ')} + +
+ ); + } + + render() { + const { showSelector } = this.state; + + return ( + +
+
+

{t('Configure filter scopes')}

+ {this.renderEditingFiltersName()} +
+ + {!showSelector ? ( +
{t('There are no filters in this dashboard.')}
+ ) : ( +
+
+ {this.renderFilterFieldList()} +
+
+ {this.renderFilterScopeTree()} +
+
+ )} +
+
+ + {showSelector && ( + + )} +
+ + ); + } +} + +FilterScopeSelector.propTypes = propTypes; diff --git a/superset/assets/src/dashboard/components/filterscope/FilterScopeTree.jsx b/superset/assets/src/dashboard/components/filterscope/FilterScopeTree.jsx new file mode 100644 index 000000000000..e433f15bc104 --- /dev/null +++ b/superset/assets/src/dashboard/components/filterscope/FilterScopeTree.jsx @@ -0,0 +1,94 @@ +/** + * 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. + */ +import React from 'react'; +import PropTypes from 'prop-types'; +import CheckboxTree from 'react-checkbox-tree'; +import 'react-checkbox-tree/lib/react-checkbox-tree.css'; +import { t } from '@superset-ui/translation'; + +import { + CheckboxChecked, + CheckboxUnchecked, + CheckboxHalfChecked, +} from '../../../components/CheckboxIcons'; +import renderFilterScopeTreeNodes from './renderFilterScopeTreeNodes'; +import { filterScopeSelectorTreeNodePropShape } from '../../util/propShapes'; + +const propTypes = { + nodes: PropTypes.arrayOf(filterScopeSelectorTreeNodePropShape).isRequired, + checked: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + ).isRequired, + expanded: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + ).isRequired, + onCheck: PropTypes.func.isRequired, + onExpand: PropTypes.func.isRequired, + selectedChartId: PropTypes.oneOfType([null, PropTypes.number]), +}; + +const defaultProps = { + selectedChartId: null, +}; + +const NOOP = () => {}; + +const FILTER_SCOPE_CHECKBOX_TREE_ICONS = { + check: , + uncheck: , + halfCheck: , + expandClose: , + expandOpen: , + expandAll: ( + {t('Expand all')} + ), + collapseAll: ( + {t('Collapse all')} + ), + parentClose: , + parentOpen: , + leaf: , +}; + +export default function FilterScopeTree({ + nodes = [], + checked = [], + expanded = [], + onCheck, + onExpand, + selectedChartId, +}) { + return ( + + ); +} + +FilterScopeTree.propTypes = propTypes; +FilterScopeTree.defaultProps = defaultProps; diff --git a/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx b/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx new file mode 100644 index 000000000000..5ffd49e80ad5 --- /dev/null +++ b/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx @@ -0,0 +1,55 @@ +/** + * 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. + */ +import React from 'react'; + +import FilterFieldItem from './FilterFieldItem'; +import { getFilterColorMap } from '../../util/dashboardFiltersColorMap'; + +export default function renderFilterFieldTreeNodes({ nodes, activeKey }) { + if (!nodes) { + return []; + } + + const root = nodes[0]; + const allFilterNodes = root.children; + const children = allFilterNodes.map(node => ({ + ...node, + children: node.children.map(child => { + const { label, value } = child; + const colorCode = getFilterColorMap()[value]; + return { + ...child, + label: ( + + ), + }; + }), + })); + + return [ + { + ...root, + children, + }, + ]; +} diff --git a/superset/assets/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx b/superset/assets/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx new file mode 100644 index 000000000000..f4a85cf039ed --- /dev/null +++ b/superset/assets/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx @@ -0,0 +1,74 @@ +/** + * 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. + */ +import React from 'react'; +import cx from 'classnames'; + +import ChartIcon from '../../../components/ChartIcon'; +import { CHART_TYPE } from '../../util/componentTypes'; + +function traverse({ currentNode = {}, selectedChartId }) { + if (!currentNode) { + return null; + } + + const { label, value, type, children } = currentNode; + if (children && children.length) { + const updatedChildren = children.map(child => + traverse({ currentNode: child, selectedChartId }), + ); + return { + ...currentNode, + label: ( + + {type === CHART_TYPE && ( + + + + )} + {label} + + ), + children: updatedChildren, + }; + } + return { + ...currentNode, + label: ( + + {label} + + ), + }; +} + +export default function renderFilterScopeTreeNodes({ nodes, selectedChartId }) { + if (!nodes) { + return []; + } + + return nodes.map(node => traverse({ currentNode: node, selectedChartId })); +} diff --git a/superset/assets/src/dashboard/containers/FilterScope.jsx b/superset/assets/src/dashboard/containers/FilterScope.jsx new file mode 100644 index 000000000000..f88d66594e61 --- /dev/null +++ b/superset/assets/src/dashboard/containers/FilterScope.jsx @@ -0,0 +1,47 @@ +/** + * 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. + */ +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import { setDirectPathToChild } from '../actions/dashboardState'; +import FilterScopeSelector from '../components/filterscope/FilterScopeSelector'; + +function mapStateToProps({ dashboardLayout, dashboardFilters, dashboardInfo }) { + return { + dashboardFilters, + filterImmuneSlices: dashboardInfo.metadata.filterImmuneSlices || [], + filterImmuneSliceFields: + dashboardInfo.metadata.filterImmuneSliceFields || {}, + layout: dashboardLayout.present, + }; +} + +function mapDispatchToProps(dispatch) { + return bindActionCreators( + { + setDirectPathToChild, + }, + dispatch, + ); +} + +export default connect( + mapStateToProps, + mapDispatchToProps, +)(FilterScopeSelector); diff --git a/superset/assets/src/dashboard/reducers/dashboardFilters.js b/superset/assets/src/dashboard/reducers/dashboardFilters.js index 7cd7c8987e4b..4c1f14ddd12a 100644 --- a/superset/assets/src/dashboard/reducers/dashboardFilters.js +++ b/superset/assets/src/dashboard/reducers/dashboardFilters.js @@ -17,7 +17,6 @@ * under the License. */ /* eslint-disable camelcase */ -import { DASHBOARD_ROOT_ID } from '../util/constants'; import { ADD_FILTER, REMOVE_FILTER, @@ -28,15 +27,23 @@ import { TIME_RANGE } from '../../visualizations/FilterBox/FilterBox'; import getFilterConfigsFromFormdata from '../util/getFilterConfigsFromFormdata'; import { buildFilterColorMap } from '../util/dashboardFiltersColorMap'; import { buildActiveFilters } from '../util/activeDashboardFilters'; +import { DASHBOARD_ROOT_ID } from '../util/constants'; + +export const DASHBOARD_FILTER_SCOPE_GLOBAL = { + scope: [DASHBOARD_ROOT_ID], + immune: [], +}; export const dashboardFilter = { chartId: 0, - componentId: '', + componentId: null, + filterName: null, directPathToFilter: [], - scope: DASHBOARD_ROOT_ID, isDateFilter: false, isInstantFilter: true, columns: {}, + labels: {}, + scopes: {}, }; export default function dashboardFiltersReducer(dashboardFilters = {}, action) { @@ -44,6 +51,13 @@ export default function dashboardFiltersReducer(dashboardFilters = {}, action) { [ADD_FILTER]() { const { chartId, component, form_data } = action; const { columns, labels } = getFilterConfigsFromFormdata(form_data); + const scopes = Object.keys(columns).reduce( + (map, column) => ({ + ...map, + [column]: DASHBOARD_FILTER_SCOPE_GLOBAL, + }), + {}, + ); const directPathToFilter = component ? (component.parents || []).slice().concat(component.id) : []; @@ -52,9 +66,11 @@ export default function dashboardFiltersReducer(dashboardFilters = {}, action) { ...dashboardFilter, chartId, componentId: component.id, + filterName: component.meta.sliceName, directPathToFilter, columns, labels, + scopes, isInstantFilter: !!form_data.instant_filtering, isDateFilter: Object.keys(columns).includes(TIME_RANGE), }; diff --git a/superset/assets/src/dashboard/reducers/getInitialState.js b/superset/assets/src/dashboard/reducers/getInitialState.js index 85a62e383983..185a8b0428fb 100644 --- a/superset/assets/src/dashboard/reducers/getInitialState.js +++ b/superset/assets/src/dashboard/reducers/getInitialState.js @@ -180,6 +180,7 @@ export default function(bootstrapData) { ...dashboardFilter, chartId: key, componentId, + filterName: slice.slice_name, directPathToFilter, columns, labels, @@ -187,8 +188,6 @@ export default function(bootstrapData) { isDateFilter: Object.keys(columns).includes(TIME_RANGE), }; } - buildActiveFilters(dashboardFilters); - buildFilterColorMap(dashboardFilters); } // sync layout names with current slice names in case a slice was edited @@ -199,6 +198,8 @@ export default function(bootstrapData) { layout[layoutId].meta.sliceName = slice.slice_name; } }); + buildActiveFilters(dashboardFilters); + buildFilterColorMap(dashboardFilters); // store the header as a layout component so we can undo/redo changes layout[DASHBOARD_HEADER_ID] = { diff --git a/superset/assets/src/dashboard/stylesheets/dashboard.less b/superset/assets/src/dashboard/stylesheets/dashboard.less index c37d5e593761..cdf11f748884 100644 --- a/superset/assets/src/dashboard/stylesheets/dashboard.less +++ b/superset/assets/src/dashboard/stylesheets/dashboard.less @@ -165,19 +165,26 @@ body { padding: 24px 24px 29px 24px; } - .delete-modal-actions-container { + .modal-dialog.filter-scope-modal { + width: 80%; + } + + .dashboard-modal-actions-container { margin-top: 24px; + text-align: right; .btn { margin-right: 16px; &:last-child { margin-right: 0; } + } + } - &.btn-primary { - background: @pink !important; - border-color: @pink !important; - } + .dashboard-modal.delete { + .btn.btn-primary { + background: @pink; + border-color: @pink; } } } diff --git a/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less new file mode 100644 index 000000000000..dd19a66fadde --- /dev/null +++ b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less @@ -0,0 +1,241 @@ +/** + * 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. + */ +@import "../../../stylesheets/less/cosmo/variables.less"; + +.filter-scope-container { + font-size: 14px; + + .nav.nav-tabs { + border: none; + } +} + +.filter-scope-header { + h4 { + margin-top: 0; + } + + .selected-fields { + margin: 12px 0 16px; + visibility: hidden; + + &.multi-edit-mode { + visibility: visible; + } + + .selected-scopes { + padding-left: 5px; + } + } +} + +.filters-scope-selector { + margin: 10px -24px 20px; + display: flex; + flex-direction: row; + position: relative; + border: 1px solid #ccc; + border-left: none; + border-right: none; + + a, a:active, a:hover { + color: @almost-black; + text-decoration: none; + } + + .react-checkbox-tree .rct-icon.rct-icon-expand-all, + .react-checkbox-tree .rct-icon.rct-icon-collapse-all { + font-size: 13px; + font-family: @font-family-sans-serif; + color: @brand-primary; + + &::before { + content: ''; + } + + &:hover { + text-decoration: underline; + } + + &:focus { + outline: none; + } + } + + .filter-field-pane { + position: relative; + width: 40%; + padding: 16px 16px 16px 24px; + border-right: 1px solid #ccc; + + .filter-container { + label { + font-weight: normal; + margin: 0 0 0 16px; + } + } + + .filter-field-item { + height: 35px; + display: flex; + align-items: center; + padding: 0 24px; + margin-left: -24px; + + &.is-selected { + border: 1px solid #aaa; + border-radius: 4px; + background-color: #eee; + margin-left: -25px; + } + } + + .react-checkbox-tree { + .rct-text { + height: 40px; + } + } + } + + .filter-scope-pane { + position: relative; + flex: 1; + padding: 16px 24px 16px 16px; + } + + .react-checkbox-tree { + flex-direction: column; + color: @almost-black; + font-size: 14px; + + .filter-scope-type { + padding: 8px 0; + display: block; + + .type-indicator { + position: relative; + top: 3px; + margin-right: 8px; + } + + &.chart { + font-weight: normal; + } + + &.selected-filter { + padding-left: 28px; + position: relative; + color: #aaa; + + &::before { + content: " "; + position: absolute; + left: 0; + top: 50%; + width: 18px; + height: 18px; + border-radius: 2px; + margin-top: -9px; + box-shadow: inset 0 0 0 2px #ccc; + background: #f2f2f2; + } + } + + &.root { + font-weight: 700; + } + + &.tab { + font-weight: 700; + } + } + + .rct-checkbox { + svg { + position: relative; + top: 3px; + width: 18px; + } + } + + .rct-node-leaf { + .rct-bare-label { + &::before { + padding-left: 5px; + } + } + } + + .rct-options { + text-align: left; + margin-left: 0; + margin-bottom: 8px; + } + + .rct-text { + margin: 0; + display: flex; + } + + .rct-title { + display: block; + font-weight: bold; + } + + // disable style from react-checkbox-trees.css + .rct-node-clickable:hover, + .rct-node-clickable:focus, + label:hover, + label:active { + background: none !important; + } + } + + .multi-edit-mode { + &.filter-scope-pane { + .rct-node.rct-node-leaf .filter-scope-type.filter_box { + display: none; + } + } + + .filter-field-item { + padding: 0 16px 0 50px; + margin-left: -50px; + + &.is-selected { + margin-left: -51px; + } + } + } + + .scope-search { + position: absolute; + right: 16px; + top: 16px; + border-radius: 4px; + border: 1px solid #ccc; + padding: 4px 8px 4px 8px; + font-size: 13px; + outline: none; + + &:focus { + border: 1px solid @brand-primary; + } + } +} diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/stylesheets/index.less index 01a0e3cb2eb0..8ebce2555b47 100644 --- a/superset/assets/src/dashboard/stylesheets/index.less +++ b/superset/assets/src/dashboard/stylesheets/index.less @@ -23,6 +23,7 @@ @import './buttons.less'; @import './dashboard.less'; @import './dnd.less'; +@import './filter-scope-selector.less'; @import './filter-indicator.less'; @import './filter-indicator-tooltip.less'; @import './grid.less'; diff --git a/superset/assets/src/dashboard/util/activeDashboardFilters.js b/superset/assets/src/dashboard/util/activeDashboardFilters.js index 8c70577d05ba..8fa00d02f1a3 100644 --- a/superset/assets/src/dashboard/util/activeDashboardFilters.js +++ b/superset/assets/src/dashboard/util/activeDashboardFilters.js @@ -17,14 +17,31 @@ * under the License. */ let activeFilters = {}; +let allFilterBoxChartIds = []; export function getActiveFilters() { return activeFilters; } +// currently filterbox is a chart, +// when define filter scopes, they have to be out pulled out in a few places. +// after we make filterbox a dashboard build-in component, +// will not need this check anymore +export function isFilterBox(chartId) { + return allFilterBoxChartIds.includes(chartId); +} + +export function getAllFilterBoxChartIds() { + return allFilterBoxChartIds; +} + // non-empty filters from dashboardFilters, // this function does not take into account: filter immune or filter scope settings export function buildActiveFilters(allDashboardFilters = {}) { + allFilterBoxChartIds = Object.values(allDashboardFilters).map( + filter => filter.chartId, + ); + activeFilters = Object.values(allDashboardFilters).reduce( (result, filter) => { const { chartId, columns } = filter; diff --git a/superset/assets/src/dashboard/util/buildFilterScopeTreeEntry.js b/superset/assets/src/dashboard/util/buildFilterScopeTreeEntry.js new file mode 100644 index 000000000000..e91ac51fbdc8 --- /dev/null +++ b/superset/assets/src/dashboard/util/buildFilterScopeTreeEntry.js @@ -0,0 +1,65 @@ +/** + * 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. + */ +import getFilterScopeNodesTree from './getFilterScopeNodesTree'; +import getFilterScopeParentNodes from './getFilterScopeParentNodes'; +import getKeyForFilterScopeTree from './getKeyForFilterScopeTree'; +import getSelectedChartIdForFilterScopeTree from './getSelectedChartIdForFilterScopeTree'; + +export default function buildFilterScopeTreeEntry({ + checkedFilterFields = [], + activeFilterField, + filterScopeMap = {}, + layout = {}, +}) { + const key = getKeyForFilterScopeTree({ + checkedFilterFields, + activeFilterField, + }); + const editingList = activeFilterField + ? [activeFilterField] + : checkedFilterFields; + const selectedChartId = getSelectedChartIdForFilterScopeTree({ + checkedFilterFields, + activeFilterField, + }); + const nodes = getFilterScopeNodesTree({ + components: layout, + filterFields: editingList, + selectedChartId, + }); + const checkedChartIdSet = new Set(); + editingList.forEach(filterField => { + (filterScopeMap[filterField].checked || []).forEach(chartId => { + checkedChartIdSet.add(`${chartId}:${filterField}`); + }); + }); + const checked = [...checkedChartIdSet]; + const expanded = filterScopeMap[key] + ? filterScopeMap[key].expanded + : getFilterScopeParentNodes(nodes, 1); + + return { + [key]: { + nodes, + nodesFiltered: [...nodes], + checked, + expanded, + }, + }; +} diff --git a/superset/assets/src/dashboard/util/constants.js b/superset/assets/src/dashboard/util/constants.js index e2cbd3215863..5eae2a8633c9 100644 --- a/superset/assets/src/dashboard/util/constants.js +++ b/superset/assets/src/dashboard/util/constants.js @@ -76,3 +76,6 @@ export const FILTER_INDICATORS_DISPLAY_LENGTH = 3; // in-component element types: can be added into // directPathToChild, used for in dashboard navigation and focus export const IN_COMPONENT_ELEMENT_TYPES = ['LABEL']; + +// filter scope selector filter fields pane root id +export const ALL_FILTERS_ROOT = 'ALL_FILTERS_ROOT'; diff --git a/superset/assets/src/dashboard/util/dashboardFiltersColorMap.js b/superset/assets/src/dashboard/util/dashboardFiltersColorMap.js index bb8f762fbd3f..129acf5ceda8 100644 --- a/superset/assets/src/dashboard/util/dashboardFiltersColorMap.js +++ b/superset/assets/src/dashboard/util/dashboardFiltersColorMap.js @@ -16,15 +16,13 @@ * specific language governing permissions and limitations * under the License. */ +import { getDashboardFilterKey } from './getDashboardFilterKey'; + // should be consistent with @badge-colors .less variable const FILTER_COLORS_COUNT = 20; let filterColorMap = {}; -export function getFilterColorKey(chartId, column) { - return `${chartId}_${column}`; -} - export function getFilterColorMap() { return filterColorMap; } @@ -38,7 +36,7 @@ export function buildFilterColorMap(allDashboardFilters = {}) { Object.keys(columns) .sort() .forEach(column => { - const key = getFilterColorKey(chartId, column); + const key = getDashboardFilterKey({ chartId, column }); const colorCode = `badge-${filterColorIndex % FILTER_COLORS_COUNT}`; /* eslint-disable no-param-reassign */ colorMap[key] = colorCode; diff --git a/superset/assets/src/dashboard/util/getCurrentScopeChartIds.js b/superset/assets/src/dashboard/util/getCurrentScopeChartIds.js new file mode 100644 index 000000000000..60d86b59bb71 --- /dev/null +++ b/superset/assets/src/dashboard/util/getCurrentScopeChartIds.js @@ -0,0 +1,62 @@ +/** + * 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. + */ + +import { CHART_TYPE } from '../util/componentTypes'; + +export default function getCurrentScopeChartIds({ + scopeComponentIds, + filterField, + filterImmuneSlices, + filterImmuneSliceFields, + components, +}) { + let chartIds = []; + + function traverse(component) { + if (!component) { + return; + } + + if ( + component.type === CHART_TYPE && + component.meta && + component.meta.chartId + ) { + chartIds.push(component.meta.chartId); + } else if (component.children) { + component.children.forEach(child => traverse(components[child])); + } + } + + scopeComponentIds.forEach(componentId => traverse(components[componentId])); + + if (filterImmuneSlices && filterImmuneSlices.length) { + chartIds = chartIds.filter(id => !filterImmuneSlices.includes(id)); + } + + if (filterImmuneSliceFields) { + chartIds = chartIds.filter( + id => + !(id.toString() in filterImmuneSliceFields) || + !filterImmuneSliceFields[id].includes(filterField), + ); + } + + return chartIds; +} diff --git a/superset/assets/src/dashboard/util/getDashboardFilterKey.js b/superset/assets/src/dashboard/util/getDashboardFilterKey.js new file mode 100644 index 000000000000..e6307c3abc3e --- /dev/null +++ b/superset/assets/src/dashboard/util/getDashboardFilterKey.js @@ -0,0 +1,27 @@ +/** + * 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. + */ +export function getDashboardFilterKey({ chartId, column }) { + return `${chartId}_${column}`; +} + +export function getChartIdAndColumnFromFilterKey(key) { + const [chartId, ...parts] = key.split('_'); + const column = parts.slice().join('_'); + return { chartId: parseInt(chartId, 10), column }; +} diff --git a/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js b/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js new file mode 100644 index 000000000000..b55d28fe66a8 --- /dev/null +++ b/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js @@ -0,0 +1,46 @@ +/** + * 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. + */ +import { t } from '@superset-ui/translation'; + +import { getDashboardFilterKey } from './getDashboardFilterKey'; +import { ALL_FILTERS_ROOT } from './constants'; + +export default function getFilterFieldNodesTree({ dashboardFilters = {} }) { + const allFilters = Object.values(dashboardFilters).map(dashboardFilter => { + const { chartId, filterName, columns, labels } = dashboardFilter; + const children = Object.keys(columns).map(column => ({ + value: getDashboardFilterKey({ chartId, column }), + label: labels[column] || column, + })); + return { + value: chartId, + label: filterName, + children, + showCheckbox: true, + }; + }); + + return [ + { + value: ALL_FILTERS_ROOT, + label: t('Select/deselect all filters'), + children: allFilters, + }, + ]; +} diff --git a/superset/assets/src/dashboard/util/getFilterScopeNodesTree.js b/superset/assets/src/dashboard/util/getFilterScopeNodesTree.js new file mode 100644 index 000000000000..470ac08a092f --- /dev/null +++ b/superset/assets/src/dashboard/util/getFilterScopeNodesTree.js @@ -0,0 +1,128 @@ +/** + * 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. + */ +import { isEmpty } from 'lodash'; +import { t } from '@superset-ui/translation'; + +import { DASHBOARD_ROOT_ID } from './constants'; +import { + CHART_TYPE, + DASHBOARD_ROOT_TYPE, + TAB_TYPE, +} from '../util/componentTypes'; + +const FILTER_SCOPE_CONTAINER_TYPES = [TAB_TYPE, DASHBOARD_ROOT_TYPE]; + +function traverse({ + currentNode = {}, + components = {}, + filterFields = [], + selectedChartId, +}) { + if (!currentNode) { + return null; + } + + const type = currentNode.type; + if ( + CHART_TYPE === type && + currentNode && + currentNode.meta && + currentNode.meta.chartId + ) { + const chartNode = { + value: currentNode.meta.chartId, + label: + currentNode.meta.sliceName || `${type} ${currentNode.meta.chartId}`, + type, + showCheckbox: selectedChartId !== currentNode.meta.chartId, + }; + + return { + ...chartNode, + children: filterFields.map(filterField => ({ + value: `${currentNode.meta.chartId}:${filterField}`, + label: `${chartNode.label}`, + type: 'filter_box', + showCheckbox: false, + })), + }; + } + + let children = []; + if (currentNode.children && currentNode.children.length) { + currentNode.children.forEach(child => { + const childNodeTree = traverse({ + currentNode: components[child], + components, + filterFields, + selectedChartId, + }); + + const childType = components[child].type; + if (FILTER_SCOPE_CONTAINER_TYPES.includes(childType)) { + children.push(childNodeTree); + } else { + children = children.concat(childNodeTree); + } + }); + } + + if (FILTER_SCOPE_CONTAINER_TYPES.includes(type)) { + let label = null; + if (type === DASHBOARD_ROOT_TYPE) { + label = t('Select/deselect all charts'); + } else { + label = + currentNode.meta && currentNode.meta.text + ? currentNode.meta.text + : `${type} ${currentNode.id}`; + } + + return { + value: currentNode.id, + label, + type, + children, + }; + } + + return children; +} + +export default function getFilterScopeNodesTree({ + components = {}, + filterFields = [], + selectedChartId, +}) { + if (isEmpty(components)) { + return []; + } + + const root = traverse({ + currentNode: components[DASHBOARD_ROOT_ID], + components, + filterFields, + selectedChartId, + }); + return [ + { + ...root, + }, + ]; +} diff --git a/superset/assets/src/dashboard/util/getFilterScopeParentNodes.js b/superset/assets/src/dashboard/util/getFilterScopeParentNodes.js new file mode 100644 index 000000000000..8330c64cf33e --- /dev/null +++ b/superset/assets/src/dashboard/util/getFilterScopeParentNodes.js @@ -0,0 +1,39 @@ +/** + * 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. + */ +export default function getFilterScopeParentNodes(nodes = [], depthLimit = -1) { + const parentNodes = []; + const traverse = (currentNode, depth) => { + if (!currentNode) { + return; + } + + if (currentNode.children && (depthLimit === -1 || depth < depthLimit)) { + parentNodes.push(currentNode.value); + currentNode.children.forEach(child => traverse(child, depth + 1)); + } + }; + + if (nodes.length > 0) { + nodes.forEach(node => { + traverse(node, 0); + }); + } + + return parentNodes; +} diff --git a/superset/assets/src/dashboard/util/getKeyForFilterScopeTree.js b/superset/assets/src/dashboard/util/getKeyForFilterScopeTree.js new file mode 100644 index 000000000000..e85dd5128c12 --- /dev/null +++ b/superset/assets/src/dashboard/util/getKeyForFilterScopeTree.js @@ -0,0 +1,28 @@ +/** + * 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. + */ +import { safeStringify } from '../../utils/safeStringify'; + +export default function getKeyForFilterScopeTree({ + activeFilterField, + checkedFilterFields, +}) { + return activeFilterField + ? safeStringify([activeFilterField]) + : safeStringify(checkedFilterFields); +} diff --git a/superset/assets/src/dashboard/util/getRevertedFilterScope.js b/superset/assets/src/dashboard/util/getRevertedFilterScope.js new file mode 100644 index 000000000000..92e4a299eadd --- /dev/null +++ b/superset/assets/src/dashboard/util/getRevertedFilterScope.js @@ -0,0 +1,42 @@ +/** + * 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. + */ +export default function getRevertedFilterScope({ + checked = [], + filterFields = [], + filterScopeMap = {}, +}) { + const checkedChartIdsByFilterField = checked.reduce((map, value) => { + const [chartId, filterField] = value.split(':'); + return { + ...map, + [filterField]: (map[filterField] || []).concat(parseInt(chartId, 10)), + }; + }, {}); + + return filterFields.reduce( + (map, filterField) => ({ + ...map, + [filterField]: { + ...filterScopeMap[filterField], + checked: checkedChartIdsByFilterField[filterField], + }, + }), + {}, + ); +} diff --git a/superset/assets/src/dashboard/util/getSelectedChartIdForFilterScopeTree.js b/superset/assets/src/dashboard/util/getSelectedChartIdForFilterScopeTree.js new file mode 100644 index 000000000000..cde72e35851a --- /dev/null +++ b/superset/assets/src/dashboard/util/getSelectedChartIdForFilterScopeTree.js @@ -0,0 +1,53 @@ +/** + * 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. + */ +import { getChartIdAndColumnFromFilterKey } from './getDashboardFilterKey'; + +export default function getSelectedChartIdForFilterScopeTree({ + activeFilterField, + checkedFilterFields, +}) { + // we don't apply filter on filter_box itself, so we will disable + // checkbox in filter scope selector. + // this function returns chart id based on current filter scope selector local state: + // 1. if in single-edit mode, return the chart id for selected filter field. + // 2. if in multi-edit mode, if all filter fields are from same chart id, + // return the single chart id. + // otherwise, there is no chart to disable. + if (activeFilterField) { + return getChartIdAndColumnFromFilterKey(activeFilterField).chartId; + } + + if (checkedFilterFields.length) { + const { chartId } = getChartIdAndColumnFromFilterKey( + checkedFilterFields[0], + ); + + if ( + checkedFilterFields.some( + filterKey => + getChartIdAndColumnFromFilterKey(filterKey).chartId !== chartId, + ) + ) { + return null; + } + return chartId; + } + + return null; +} diff --git a/superset/assets/src/dashboard/util/propShapes.jsx b/superset/assets/src/dashboard/util/propShapes.jsx index d4fb6ddd623f..b59f41ea0c0b 100644 --- a/superset/assets/src/dashboard/util/propShapes.jsx +++ b/superset/assets/src/dashboard/util/propShapes.jsx @@ -35,6 +35,9 @@ export const componentShape = PropTypes.shape({ // Row background: PropTypes.oneOf(backgroundStyleOptions.map(opt => opt.value)), + + // Chart + chartId: PropTypes.number, }), }); @@ -76,7 +79,7 @@ export const filterIndicatorPropShape = PropTypes.shape({ isInstantFilter: PropTypes.bool.isRequired, label: PropTypes.string.isRequired, name: PropTypes.string.isRequired, - scope: PropTypes.string.isRequired, + scope: PropTypes.arrayOf(PropTypes.string), values: PropTypes.array.isRequired, }); @@ -102,6 +105,30 @@ export const dashboardInfoPropShape = PropTypes.shape({ userId: PropTypes.string.isRequired, }); +/* eslint-disable-next-line no-undef */ +const lazyFunction = f => () => f().apply(this, arguments); + +const leafType = PropTypes.shape({ + value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + label: PropTypes.string.isRequired, +}); + +const parentShape = { + value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, + label: PropTypes.string.isRequired, + children: PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.shape(lazyFunction(() => parentShape)), + leafType, + ]), + ), +}; + +export const filterScopeSelectorTreeNodePropShape = PropTypes.oneOfType([ + PropTypes.shape(parentShape), + leafType, +]); + export const loadStatsPropShape = PropTypes.objectOf( PropTypes.shape({ didLoad: PropTypes.bool.isRequired, diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.css b/superset/assets/src/visualizations/FilterBox/FilterBox.css index f546c9c463dc..0b678e0fcd98 100644 --- a/superset/assets/src/visualizations/FilterBox/FilterBox.css +++ b/superset/assets/src/visualizations/FilterBox/FilterBox.css @@ -60,7 +60,7 @@ ul.select2-results div.filter_box{ .filter-container label { display: flex; font-weight: bold; - margin-bottom: 8px; + margin: 0 0 8px 8px; } .filter-container .filter-badge-container { width: 30px; diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.jsx b/superset/assets/src/visualizations/FilterBox/FilterBox.jsx index a2b9cc84336a..b259e7bff2a7 100644 --- a/superset/assets/src/visualizations/FilterBox/FilterBox.jsx +++ b/superset/assets/src/visualizations/FilterBox/FilterBox.jsx @@ -29,7 +29,8 @@ import Control from '../../explore/components/Control'; import controls from '../../explore/controls'; import OnPasteSelect from '../../components/OnPasteSelect'; import VirtualizedRendererWrap from '../../components/VirtualizedRendererWrap'; -import { getFilterColorKey, getFilterColorMap } from '../../dashboard/util/dashboardFiltersColorMap'; +import { getDashboardFilterKey } from '../../dashboard/util/getDashboardFilterKey'; +import { getFilterColorMap } from '../../dashboard/util/dashboardFiltersColorMap'; import FilterBadgeIcon from '../../components/FilterBadgeIcon'; import './FilterBox.css'; @@ -303,7 +304,7 @@ class FilterBox extends React.Component { } renderFilterBadge(chartId, column) { - const colorKey = getFilterColorKey(chartId, column); + const colorKey = getDashboardFilterKey({ chartId, column }); const filterColorMap = getFilterColorMap(); const colorCode = filterColorMap[colorKey];