You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by gr...@apache.org on 2019/10/15 00:48:45 UTC
[incubator-superset] 01/01: dashboard filter scope selector modal
This is an automated email from the ASF dual-hosted git repository.
graceguo pushed a commit to branch scope-selector-modal
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
commit 5514c1c0ff3686acaf9ff6e8c63410dfdb6cf041
Author: Grace <gr...@airbnb.com>
AuthorDate: Mon Oct 14 17:48:08 2019 -0700
dashboard filter scope selector modal
---
superset/assets/package-lock.json | 11 +
superset/assets/package.json | 1 +
.../dashboard/util/getFilterScopeTree_spec.js | 108 +++++
.../index.less => components/CheckboxChecked.jsx} | 22 +-
.../CheckboxHalfchecked.jsx} | 22 +-
.../CheckboxUnchecked.jsx} | 22 +-
superset/assets/src/components/ModalTrigger.jsx | 2 +
.../dashboard/components/DeleteComponentModal.jsx | 4 +-
.../components/FilterIndicatorsContainer.jsx | 8 +-
.../assets/src/dashboard/components/Header.jsx | 9 +-
.../filterscope/FilterFieldItem.jsx} | 32 +-
.../components/filterscope/FilterFieldTree.jsx | 72 ++++
.../FilterScopeModal.jsx} | 32 +-
.../components/filterscope/FilterScopeSelector.jsx | 467 +++++++++++++++++++++
.../components/filterscope/FilterScopeTree.jsx | 71 ++++
.../filterscope/renderFilterFieldTreeNodes.jsx} | 34 +-
.../filterscope/renderFilterScopeTreeNodes.jsx} | 46 +-
.../FilterScope.jsx} | 50 ++-
.../src/dashboard/reducers/dashboardFilters.js | 6 +-
.../src/dashboard/reducers/getInitialState.js | 5 +-
.../src/dashboard/stylesheets/dashboard.less | 17 +-
.../stylesheets/filter-scope-selector.less | 168 ++++++++
.../assets/src/dashboard/stylesheets/index.less | 1 +
.../src/dashboard/util/activeDashboardFilters.js | 15 +
.../src/dashboard/util/dashboardFiltersColorMap.js | 8 +-
.../src/dashboard/util/getCurrentScopeChartIds.js | 60 +++
.../index.less => util/getDashboardFilterKey.js} | 21 +-
.../index.less => util/getFilterFieldNodesTree.js} | 37 +-
.../src/dashboard/util/getFilterScopeNodesTree.js | 116 +++++
.../getFilterScopeParentNodes.js} | 33 +-
.../index.less => util/getRevertedFilterScope.js} | 36 +-
superset/assets/src/dashboard/util/propShapes.jsx | 11 +-
.../src/visualizations/FilterBox/FilterBox.css | 2 +-
.../src/visualizations/FilterBox/FilterBox.jsx | 5 +-
34 files changed, 1347 insertions(+), 207 deletions(-)
diff --git a/superset/assets/package-lock.json b/superset/assets/package-lock.json
index 298fc1c..7f66962 100644
--- a/superset/assets/package-lock.json
+++ b/superset/assets/package-lock.json
@@ -19971,6 +19971,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 d275e86..274a59a 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -116,6 +116,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/util/getFilterScopeTree_spec.js b/superset/assets/spec/javascripts/dashboard/util/getFilterScopeTree_spec.js
new file mode 100644
index 0000000..51c6630
--- /dev/null
+++ b/superset/assets/spec/javascripts/dashboard/util/getFilterScopeTree_spec.js
@@ -0,0 +1,108 @@
+/**
+ * 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 '../../../../../../assets/src/dashboard/util/getFilterScopeNodesTree';
+
+describe('getFilterScopeNodesTree', () => {
+ it('should create scope tree for empty dashboard', () => {
+ expect(getFilterScopeNodesTree({})).toEqual([]);
+ });
+
+ it('should create scope tree for simple grid dashboard', () => {
+ const components = {
+ 'CHART-jJ5Yj1Ptaz': {
+ children: [],
+ id: 'CHART-jJ5Yj1Ptaz',
+ meta: {
+ chartId: 83,
+ height: 50,
+ sliceName: 'Growth Rate',
+ width: 4
+ },
+ parents: [
+ 'ROOT_ID',
+ 'GRID_ID',
+ 'ROW-LCjsdSetJ'
+ ],
+ type: 'CHART'
+ },
+ 'CHART-z4gmEuCqQ5': {
+ children: [],
+ id: 'CHART-z4gmEuCqQ5',
+ meta: {
+ chartId: 82,
+ height: 50,
+ sliceName: 'Region Filter',
+ width: 4
+ },
+ parents: [
+ 'ROOT_ID',
+ 'GRID_ID',
+ 'ROW-LCjsdSetJ'
+ ],
+ type: 'CHART'
+ },
+ DASHBOARD_VERSION_KEY: 'v2',
+ GRID_ID: {
+ children: [
+ 'ROW-LCjsdSetJ'
+ ],
+ id: 'GRID_ID',
+ parents: [
+ 'ROOT_ID'
+ ],
+ type: 'GRID'
+ },
+ HEADER_ID: {
+ id: 'HEADER_ID',
+ type: 'HEADER',
+ meta: {
+ text: 'filter scope'
+ }
+ },
+ ROOT_ID: {
+ children: [
+ 'GRID_ID'
+ ],
+ id: 'ROOT_ID',
+ type: 'ROOT'
+ },
+ 'ROW-LCjsdSetJ': {
+ children: [
+ 'CHART-z4gmEuCqQ5',
+ 'CHART-jJ5Yj1Ptaz'
+ ],
+ id: 'ROW-LCjsdSetJ',
+ meta: {
+ background: 'BACKGROUND_TRANSPARENT'
+ },
+ parents: [
+ 'ROOT_ID',
+ 'GRID_ID'
+ ],
+ type: 'ROW'
+ }
+ };
+ expect(getFilterScopeNodesTree(components)).toEqual([]);
+ });
+
+ it('should create scope tree for nested tabs dashboard', () => {
+
+ });
+
+});
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/components/CheckboxChecked.jsx
similarity index 66%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/components/CheckboxChecked.jsx
index 01a0e3c..140c2b6 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/components/CheckboxChecked.jsx
@@ -16,17 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+import React from 'react';
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+export default function CheckboxChecked() {
+ return (
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.11 18 18 17.1 18 16V2C18 0.9 17.11 0 16 0Z" fill="#00A699"/>
+ <path d="M7 14L2 9L3.41 7.59L7 11.17L14.59 3.58L16 5L7 14Z" fill="white"/>
+ </svg>
+ );
+}
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/components/CheckboxHalfchecked.jsx
similarity index 67%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/components/CheckboxHalfchecked.jsx
index 01a0e3c..fa0de81 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/components/CheckboxHalfchecked.jsx
@@ -16,17 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+import React from 'react';
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+export default function CheckboxHalfchecked() {
+ return (
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z" fill="#999999"/>
+ <path d="M14 10H4V8H14V10Z" fill="white"/>
+ </svg>
+ );
+}
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/components/CheckboxUnchecked.jsx
similarity index 67%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/components/CheckboxUnchecked.jsx
index 01a0e3c..fe319e8 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/components/CheckboxUnchecked.jsx
@@ -16,17 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+import React from 'react';
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+export default function CheckboxUnchecked() {
+ return (
+ <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z" fill="#CCCCCC"/>
+ <path d="M16 2V16H2V2H16V2Z" fill="white"/>
+ </svg>
+ );
+}
diff --git a/superset/assets/src/components/ModalTrigger.jsx b/superset/assets/src/components/ModalTrigger.jsx
index 750be52..8f363f5 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 (
<Modal
+ dialogClassName={this.props.dialogClassName}
animation={this.props.animation}
show={this.state.showModal}
onHide={this.close}
diff --git a/superset/assets/src/dashboard/components/DeleteComponentModal.jsx b/superset/assets/src/dashboard/components/DeleteComponentModal.jsx
index 366e78a..1d50017 100644
--- a/superset/assets/src/dashboard/components/DeleteComponentModal.jsx
+++ b/superset/assets/src/dashboard/components/DeleteComponentModal.jsx
@@ -57,14 +57,14 @@ export default class DeleteComponentModal extends React.PureComponent {
ref={this.setModalRef}
triggerNode={this.props.triggerNode}
modalBody={
- <div className="delete-component-modal">
+ <div className="dashboard-modal delete">
<h1>{t('Delete dashboard tab?')}</h1>
<div>
Deleting a tab will remove all content within it. You may still
reverse this action with the <b>undo</b> button (cmd + z) until
you save your changes.
</div>
- <div className="delete-modal-actions-container">
+ <div className="dashboard-modal-actions-container">
<Button onClick={this.close}>{t('Cancel')}</Button>
<Button bsStyle="primary" onClick={this.deleteTab}>
{t('Delete')}
diff --git a/superset/assets/src/dashboard/components/FilterIndicatorsContainer.jsx b/superset/assets/src/dashboard/components/FilterIndicatorsContainer.jsx
index f84e32d..6c8b6cf 100644
--- a/superset/assets/src/dashboard/components/FilterIndicatorsContainer.jsx
+++ b/superset/assets/src/dashboard/components/FilterIndicatorsContainer.jsx
@@ -23,10 +23,8 @@ import { isEmpty } from 'lodash';
import FilterIndicator from './FilterIndicator';
import FilterIndicatorGroup from './FilterIndicatorGroup';
import { FILTER_INDICATORS_DISPLAY_LENGTH } from '../util/constants';
-import {
- getFilterColorKey,
- getFilterColorMap,
-} from '../util/dashboardFiltersColorMap';
+import { getDashboardFilterKey } from '../util/getDashboardFilterKey';
+import { getFilterColorMap } from '../util/dashboardFiltersColorMap';
const propTypes = {
// from props
@@ -92,7 +90,7 @@ export default class FilterIndicatorsContainer extends React.PureComponent {
!filterImmuneSlices.includes(currentChartId)
) {
Object.keys(columns).forEach(name => {
- const colorMapKey = getFilterColorKey(chartId, name);
+ const colorMapKey = getDashboardFilterKey(chartId, name);
const directPathToLabel = directPathToFilter.slice();
directPathToLabel.push(`LABEL-${name}`);
const indicator = {
diff --git a/superset/assets/src/dashboard/components/Header.jsx b/superset/assets/src/dashboard/components/Header.jsx
index b807273..569dac9 100644
--- a/superset/assets/src/dashboard/components/Header.jsx
+++ b/superset/assets/src/dashboard/components/Header.jsx
@@ -26,6 +26,7 @@ import HeaderActionsDropdown from './HeaderActionsDropdown';
import EditableTitle from '../../components/EditableTitle';
import Button from '../../components/Button';
import FaveStar from '../../components/FaveStar';
+import FilterScopeModal from './filterscope/FilterScopeModal';
import PublishedStatus from './PublishedStatus';
import UndoRedoKeylisteners from './UndoRedoKeylisteners';
@@ -347,7 +348,7 @@ class Header extends React.PureComponent {
bsSize="small"
onClick={this.onInsertComponentsButtonClick}
>
- {t('Insert components')}
+ {t('Components')}
</Button>
)}
@@ -361,6 +362,12 @@ class Header extends React.PureComponent {
</Button>
)}
+ {editMode && (
+ <FilterScopeModal
+ triggerNode={<Button bsSize="small">{t('Filters')}</Button>}
+ />
+ )}
+
{editMode && hasUnsavedChanges && (
<Button
bsSize="small"
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/components/filterscope/FilterFieldItem.jsx
similarity index 60%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/dashboard/components/filterscope/FilterFieldItem.jsx
index 01a0e3c..4b1b070 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/dashboard/components/filterscope/FilterFieldItem.jsx
@@ -16,17 +16,23 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+import React from 'react';
+import PropTypes from 'prop-types';
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+import FilterBadgeIcon from '../../../components/FilterBadgeIcon';
+
+const propTypes = {
+ label: PropTypes.string.isRequired,
+ colorCode: PropTypes.string.isRequired,
+};
+
+export default function FilterFieldItem({ label, colorCode = '' }) {
+ return (
+ <a className="filter-field-item filter-container">
+ <FilterBadgeIcon colorCode={colorCode} />
+ <label htmlFor={label}>{label}</label>
+ </a>
+ );
+}
+
+FilterFieldItem.propTypes = propTypes;
diff --git a/superset/assets/src/dashboard/components/filterscope/FilterFieldTree.jsx b/superset/assets/src/dashboard/components/filterscope/FilterFieldTree.jsx
new file mode 100644
index 0000000..48b8929
--- /dev/null
+++ b/superset/assets/src/dashboard/components/filterscope/FilterFieldTree.jsx
@@ -0,0 +1,72 @@
+/**
+ * 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 CheckboxChecked from '../../../components/CheckboxChecked';
+import CheckboxUnchecked from '../../../components/CheckboxUnchecked';
+import CheckboxHalfchecked from '../../../components/CheckboxHalfchecked';
+import renderFilterFieldTreeNodes from './renderFilterFieldTreeNodes';
+
+const propTypes = {
+ nodes: PropTypes.arrayOf(PropTypes.object).isRequired,
+ checked: PropTypes.arrayOf(PropTypes.string).isRequired,
+ expanded: PropTypes.arrayOf(PropTypes.string).isRequired,
+ onCheck: PropTypes.func.isRequired,
+ onExpand: PropTypes.func.isRequired,
+ onClick: PropTypes.func.isRequired,
+};
+
+export default function FilterFieldTree({
+ nodes,
+ checked,
+ expanded,
+ onClick,
+ onCheck,
+ onExpand,
+}) {
+ return (
+ <CheckboxTree
+ showNodeIcon={false}
+ expandOnClick
+ nodes={renderFilterFieldTreeNodes(nodes)}
+ checked={checked}
+ expanded={expanded}
+ onClick={onClick}
+ onCheck={onCheck}
+ onExpand={onExpand}
+ icons={{
+ check: <CheckboxChecked />,
+ uncheck: <CheckboxUnchecked />,
+ halfCheck: <CheckboxHalfchecked />,
+ expandClose: <span className="rct-icon rct-icon-expand-close" />,
+ expandOpen: <span className="rct-icon rct-icon-expand-open" />,
+ expandAll: <span className="rct-icon rct-icon-expand-all" />,
+ collapseAll: <span className="rct-icon rct-icon-collapse-all" />,
+ parentClose: <span className="rct-icon rct-icon-parent-close" />,
+ parentOpen: <span className="rct-icon rct-icon-parent-open" />,
+ leaf: <span className="rct-icon rct-icon-leaf" />,
+ }}
+ />
+ );
+}
+
+FilterFieldTree.propTypes = propTypes;
diff --git a/superset/assets/src/dashboard/components/DeleteComponentModal.jsx b/superset/assets/src/dashboard/components/filterscope/FilterScopeModal.jsx
similarity index 57%
copy from superset/assets/src/dashboard/components/DeleteComponentModal.jsx
copy to superset/assets/src/dashboard/components/filterscope/FilterScopeModal.jsx
index 366e78a..bc20185 100644
--- a/superset/assets/src/dashboard/components/DeleteComponentModal.jsx
+++ b/superset/assets/src/dashboard/components/filterscope/FilterScopeModal.jsx
@@ -18,23 +18,20 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
-import { t } from '@superset-ui/translation';
-import ModalTrigger from '../../components/ModalTrigger';
+import ModalTrigger from '../../../components/ModalTrigger';
+import FilterScope from '../../containers/FilterScope';
const propTypes = {
triggerNode: PropTypes.node.isRequired,
- onDelete: PropTypes.func.isRequired,
};
-export default class DeleteComponentModal extends React.PureComponent {
+export default class FilterScopeModal extends React.PureComponent {
constructor(props) {
super(props);
this.modal = null;
this.close = this.close.bind(this);
- this.deleteTab = this.deleteTab.bind(this);
this.setModalRef = this.setModalRef.bind(this);
}
@@ -46,30 +43,15 @@ export default class DeleteComponentModal extends React.PureComponent {
this.modal.close();
}
- deleteTab() {
- this.modal.close();
- this.props.onDelete();
- }
-
render() {
return (
<ModalTrigger
+ dialogClassName="filter-scope-modal"
ref={this.setModalRef}
triggerNode={this.props.triggerNode}
modalBody={
- <div className="delete-component-modal">
- <h1>{t('Delete dashboard tab?')}</h1>
- <div>
- Deleting a tab will remove all content within it. You may still
- reverse this action with the <b>undo</b> button (cmd + z) until
- you save your changes.
- </div>
- <div className="delete-modal-actions-container">
- <Button onClick={this.close}>{t('Cancel')}</Button>
- <Button bsStyle="primary" onClick={this.deleteTab}>
- {t('Delete')}
- </Button>
- </div>
+ <div className="dashboard-modal filter-scope">
+ <FilterScope onCloseModal={this.close} />
</div>
}
/>
@@ -77,4 +59,4 @@ export default class DeleteComponentModal extends React.PureComponent {
}
}
-DeleteComponentModal.propTypes = propTypes;
+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 0000000..8028271
--- /dev/null
+++ b/superset/assets/src/dashboard/components/filterscope/FilterScopeSelector.jsx
@@ -0,0 +1,467 @@
+/**
+ * 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 getFilterScopeNodesTree from '../../util/getFilterScopeNodesTree';
+import getFilterFieldNodesTree from '../../util/getFilterFieldNodesTree';
+import getFilterScopeParentNodes from '../../util/getFilterScopeParentNodes';
+import getCurrentScopeChartIds from '../../util/getCurrentScopeChartIds';
+import getRevertedFilterScope from '../../util/getRevertedFilterScope';
+import FilterScopeTree from './FilterScopeTree';
+import FilterFieldTree from './FilterFieldTree';
+import { getDashboardFilterKey } from '../../util/getDashboardFilterKey';
+
+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,
+ isSingleEditMode: true,
+ });
+ this.allfilterFields = [];
+ filterFieldNodes.forEach(({ children }) => {
+ children.forEach(child => {
+ this.allfilterFields.push(child.value);
+ });
+ });
+
+ this.defaultFilterKey = Object.keys(filterFieldNodes).length
+ ? filterFieldNodes[0].children[0].value
+ : '';
+ const checkedFilterFields = [this.defaultFilterKey];
+ // do not expand filter box
+ const expandedFilterIds = [];
+
+ // display checkbox tree of whole dashboard layout
+ const nodes = getFilterScopeNodesTree({
+ components: layout,
+ isSingleEditMode: true,
+ checkedFilterFields,
+ });
+ const expanded = getFilterScopeParentNodes(nodes, 1);
+ const filterScopeMap = Object.values(dashboardFilters).reduce(
+ (map, { chartId, columns }) => {
+ const filterScopeByChartId = Object.keys(columns).reduce(
+ (mapByChartId, columnName) => {
+ const filterKey = getDashboardFilterKey(chartId, columnName);
+ return {
+ ...mapByChartId,
+ [filterKey]: {
+ // unfiltered nodes
+ nodes,
+ // filtered nodes in display if searchText is not empty
+ nodesFiltered: nodes.slice(),
+ checked: getCurrentScopeChartIds({
+ scopeComponentIds: ['ROOT_ID'], //dashboardFilters[chartId].scopes[columnName],
+ filterField: columnName,
+ filterImmuneSlices,
+ filterImmuneSliceFields,
+ components: layout,
+ }),
+ expanded,
+ },
+ };
+ },
+ {},
+ );
+
+ return {
+ ...map,
+ ...filterScopeByChartId,
+ };
+ },
+ {},
+ );
+
+ this.state = {
+ showSelector: true,
+ activeKey: this.defaultFilterKey,
+ searchText: '',
+ filterScopeMap,
+ filterFieldNodes,
+ checkedFilterFields,
+ expandedFilterIds,
+ isSingleEditMode: true,
+ };
+ } else {
+ this.state = {
+ showSelector: false,
+ };
+ }
+
+ this.filterNodes = this.filterNodes.bind(this);
+ this.onChangeFilterField = this.onChangeFilterField.bind(this);
+ this.onToggleEditMode = this.onToggleEditMode.bind(this);
+ this.onCheckFilterScope = this.onCheckFilterScope.bind(this);
+ this.onExpandFilterScope = this.onExpandFilterScope.bind(this);
+ this.onSearchInputChange = this.onSearchInputChange.bind(this);
+ this.onClickFilterField = this.onClickFilterField.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 {
+ activeKey,
+ filterScopeMap,
+ isSingleEditMode,
+ checkedFilterFields,
+ } = this.state;
+
+ if (isSingleEditMode) {
+ const updatedEntry = {
+ ...filterScopeMap[activeKey],
+ checked: checked.map(c => JSON.parse(c)),
+ };
+
+ this.setState(() => ({
+ filterScopeMap: {
+ ...filterScopeMap,
+ [activeKey]: updatedEntry,
+ },
+ }));
+ } else {
+ // multi edit mode: update every scope in checkedFilterFields based on grouped selection
+ const updatedEntry = {
+ ...filterScopeMap[activeKey],
+ checked,
+ };
+
+ const updatedFilterScopeMap = getRevertedFilterScope({
+ checked,
+ checkedFilterFields,
+ filterScopeMap,
+ });
+
+ this.setState(() => ({
+ filterScopeMap: {
+ ...filterScopeMap,
+ ...updatedFilterScopeMap,
+ [activeKey]: updatedEntry,
+ },
+ }));
+ }
+ }
+
+ onExpandFilterScope(expanded) {
+ const { activeKey, filterScopeMap } = this.state;
+ const updatedEntry = {
+ ...filterScopeMap[activeKey],
+ expanded,
+ };
+ this.setState(() => ({
+ filterScopeMap: {
+ ...filterScopeMap,
+ [activeKey]: updatedEntry,
+ },
+ }));
+ }
+
+ onClickFilterField(filterField) {
+ this.onChangeFilterField(filterField.value);
+ }
+
+ onCheckFilterField(checkedFilterFields) {
+ const { layout } = this.props;
+ const { isSingleEditMode, filterScopeMap } = this.state;
+ const nodes = getFilterScopeNodesTree({
+ components: layout,
+ isSingleEditMode,
+ checkedFilterFields,
+ });
+ const activeKey = `[${checkedFilterFields.join(',')}]`;
+ const checkedChartIdSet = new Set();
+ checkedFilterFields.forEach(filterField => {
+ filterScopeMap[filterField].checked.forEach(chartId => {
+ checkedChartIdSet.add(`${chartId}:${filterField}`);
+ });
+ });
+
+ this.setState(() => ({
+ activeKey,
+ checkedFilterFields,
+ filterScopeMap: {
+ ...filterScopeMap,
+ [activeKey]: {
+ nodes,
+ nodesFiltered: nodes.slice(),
+ checked: [...checkedChartIdSet],
+ expanded: getFilterScopeParentNodes(nodes, 1),
+ },
+ },
+ }));
+ }
+
+ onExpandFilterField(expandedFilterIds) {
+ this.setState(() => ({
+ expandedFilterIds,
+ }));
+ }
+
+ onSearchInputChange(e) {
+ this.setState({ searchText: e.target.value }, this.filterTree);
+ }
+
+ onChangeFilterField(activeKey) {
+ if (this.allfilterFields.includes(activeKey)) {
+ this.setState({ activeKey });
+ }
+ }
+
+ onToggleEditMode() {
+ const {
+ activeKey,
+ isSingleEditMode,
+ checkedFilterFields,
+ } = this.state;
+ const { dashboardFilters } = this.props;
+ if (isSingleEditMode) {
+ // single edit => multi edit
+ this.setState(
+ {
+ isSingleEditMode: false,
+ checkedFilterFields: [activeKey],
+ filterFieldNodes: getFilterFieldNodesTree({
+ dashboardFilters,
+ isSingleEditMode: false,
+ }),
+ },
+ () => this.onCheckFilterField([activeKey]),
+ );
+ } else {
+ // multi edit => single edit
+ const nextActiveKey =
+ checkedFilterFields.length === 0
+ ? this.defaultFilterKey
+ : checkedFilterFields[0];
+
+ this.setState(() => ({
+ isSingleEditMode: true,
+ activeKey: nextActiveKey,
+ checkedFilterFields: [activeKey],
+ filterFieldNodes: getFilterFieldNodesTree({
+ dashboardFilters,
+ isSingleEditMode: true,
+ }),
+ }));
+ }
+ }
+
+ 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,
+ }),
+ {},
+ ),
+ );
+ this.props.onCloseModal();
+ }
+
+ filterTree() {
+ // Reset nodes back to unfiltered state
+ if (!this.state.searchText) {
+ this.setState(prevState => {
+ const { activeKey, filterScopeMap } = prevState;
+ const updatedEntry = {
+ ...filterScopeMap[activeKey],
+ nodesFiltered: filterScopeMap[activeKey].nodes,
+ };
+ return {
+ filterScopeMap: {
+ ...filterScopeMap,
+ [activeKey]: updatedEntry,
+ },
+ };
+ });
+
+ return;
+ }
+
+ const updater = prevState => {
+ const { activeKey, filterScopeMap } = prevState;
+ const nodesFiltered = filterScopeMap[activeKey].nodes.reduce(this.filterNodes, []);
+ const updatedEntry = {
+ ...filterScopeMap[activeKey],
+ nodesFiltered,
+ };
+ return {
+ filterScopeMap: {
+ ...filterScopeMap,
+ [activeKey]: 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 {
+ filterFieldNodes,
+ checkedFilterFields,
+ expandedFilterIds,
+ } = this.state;
+ return (
+ <FilterFieldTree
+ nodes={filterFieldNodes}
+ checked={checkedFilterFields}
+ expanded={expandedFilterIds}
+ onClick={this.onClickFilterField}
+ onCheck={this.onCheckFilterField}
+ onExpand={this.onExpandFilterField}
+ />
+ );
+ }
+
+ renderFilterScopeTree() {
+ const { filterScopeMap, activeKey: key } = this.state;
+ return (
+ <FilterScopeTree
+ nodes={filterScopeMap[key].nodesFiltered}
+ checked={filterScopeMap[key].checked}
+ expanded={filterScopeMap[key].expanded}
+ onCheck={this.onCheckFilterScope}
+ onExpand={this.onExpandFilterScope}
+ />
+ );
+ }
+
+ renderEditModeControl() {
+ const { isSingleEditMode } = this.state;
+ return (
+ <span
+ role="button"
+ tabIndex="0"
+ className="edit-mode-toggle"
+ onClick={this.onToggleEditMode}
+ >
+ {isSingleEditMode
+ ? t('Edit multiple filters')
+ : t('Edit individual filter')}
+ </span>
+ );
+ }
+
+ render() {
+ const { showSelector, searchText, isSingleEditMode } = this.state;
+
+ return (
+ <React.Fragment>
+ <div className="filter-scope-container">
+ <div className="filter-scope-header">
+ <h4>{t('Configure filter scopes')}</h4>
+ <input
+ className={cx('filter-text', {
+ 'multi-edit-mode': !isSingleEditMode,
+ })}
+ placeholder="Search..."
+ type="text"
+ value={searchText}
+ onChange={this.onSearchInputChange}
+ />
+ </div>
+
+ {!showSelector && <div>There is no filter in this dashboard</div>}
+
+ {showSelector && (
+ <div className="filters-scope-selector">
+ <div
+ className={cx('filter-field-pane', {
+ 'multi-edit-mode': !isSingleEditMode,
+ })}
+ >
+ {this.renderEditModeControl()}
+ {this.renderFilterFieldList()}
+ </div>
+ <div
+ className={cx('filter-scope-pane', {
+ 'multi-edit-mode': !isSingleEditMode,
+ })}
+ >
+ {this.renderFilterScopeTree()}
+ </div>
+ </div>
+ )}
+ </div>
+ <div className="dashboard-modal-actions-container">
+ <Button onClick={this.onClose}>{t('Cancel')}</Button>
+ {showSelector && (
+ <Button bsStyle="primary" onClick={this.onSave}>
+ {t('Save')}
+ </Button>
+ )}
+ </div>
+ </React.Fragment>
+ );
+ }
+}
+
+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 0000000..bc05551
--- /dev/null
+++ b/superset/assets/src/dashboard/components/filterscope/FilterScopeTree.jsx
@@ -0,0 +1,71 @@
+/**
+ * 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 CheckboxChecked from '../../../components/CheckboxChecked';
+import CheckboxUnchecked from '../../../components/CheckboxUnchecked';
+import CheckboxHalfchecked from '../../../components/CheckboxHalfchecked';
+import renderFilterScopeTreeNodes from './renderFilterScopeTreeNodes';
+
+const propTypes = {
+ nodes: PropTypes.arrayOf(PropTypes.object).isRequired,
+ checked: PropTypes.arrayOf(PropTypes.string).isRequired,
+ expanded: PropTypes.arrayOf(PropTypes.string).isRequired,
+ onCheck: PropTypes.func.isRequired,
+ onExpand: PropTypes.func.isRequired,
+};
+
+export default function FilterScopeTree({
+ nodes,
+ checked,
+ expanded,
+ onCheck,
+ onExpand,
+}) {
+ return (
+ <CheckboxTree
+ showExpandAll
+ expandOnClick
+ showNodeIcon={false}
+ nodes={renderFilterScopeTreeNodes(nodes)}
+ checked={checked}
+ expanded={expanded}
+ onCheck={onCheck}
+ onExpand={onExpand}
+ onClick={() => {}}
+ icons={{
+ check: <CheckboxChecked />,
+ uncheck: <CheckboxUnchecked />,
+ halfCheck: <CheckboxHalfchecked />,
+ expandClose: <span className="rct-icon rct-icon-expand-close" />,
+ expandOpen: <span className="rct-icon rct-icon-expand-open" />,
+ expandAll: <span className="rct-icon rct-icon-expand-all" />,
+ collapseAll: <span className="rct-icon rct-icon-collapse-all" />,
+ parentClose: <span className="rct-icon rct-icon-parent-close" />,
+ parentOpen: <span className="rct-icon rct-icon-parent-open" />,
+ leaf: <span className="rct-icon rct-icon-leaf" />,
+ }}
+ />
+ );
+}
+
+FilterScopeTree.propTypes = propTypes;
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx
similarity index 58%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx
index 01a0e3c..25c566f 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx
@@ -16,17 +16,25 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+import React from 'react';
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+import FilterFieldItem from './FilterFieldItem';
+import { getFilterColorMap } from '../../util/dashboardFiltersColorMap';
+
+export default function renderFilterFieldTreeNodes(nodes) {
+ if (nodes.length === 0) {
+ return [];
+ }
+
+ return nodes.map(node => ({
+ ...node,
+ children: node.children.map(child => {
+ const { label, value } = child;
+ const colorCode = getFilterColorMap()[value];
+ return {
+ ...child,
+ label: <FilterFieldItem label={label} colorCode={colorCode} />,
+ };
+ }),
+ }));
+}
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx
similarity index 51%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx
index 01a0e3c..29c448d 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx
@@ -16,17 +16,37 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+import React from 'react';
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+export default function renderFilterScopeTreeNodes(nodes) {
+ if (nodes.length === 0) {
+ return [];
+ }
+
+ function traverse(currentNode) {
+ if (!currentNode) {
+ return null;
+ }
+
+ const { label, type, children } = currentNode;
+ if (children && children.length) {
+ const updatedChildren = children.map(child => traverse(child));
+ return {
+ ...currentNode,
+ label: (
+ <a className={`filter-scope-type ${type.toLowerCase()}`}>{label}</a>
+ ),
+ children: updatedChildren,
+ };
+ }
+
+ return {
+ ...currentNode,
+ label: (
+ <a className={`filter-scope-type ${type.toLowerCase()}`}>{label}</a>
+ ),
+ };
+ }
+
+ return nodes.map(node => traverse(node));
+}
diff --git a/superset/assets/src/dashboard/util/activeDashboardFilters.js b/superset/assets/src/dashboard/containers/FilterScope.jsx
similarity index 50%
copy from superset/assets/src/dashboard/util/activeDashboardFilters.js
copy to superset/assets/src/dashboard/containers/FilterScope.jsx
index 8c70577..38a5a08 100644
--- a/superset/assets/src/dashboard/util/activeDashboardFilters.js
+++ b/superset/assets/src/dashboard/containers/FilterScope.jsx
@@ -16,35 +16,33 @@
* specific language governing permissions and limitations
* under the License.
*/
-let activeFilters = {};
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
-export function getActiveFilters() {
- return activeFilters;
-}
-
-// non-empty filters from dashboardFilters,
-// this function does not take into account: filter immune or filter scope settings
-export function buildActiveFilters(allDashboardFilters = {}) {
- activeFilters = Object.values(allDashboardFilters).reduce(
- (result, filter) => {
- const { chartId, columns } = filter;
+import { setDirectPathToChild } from '../actions/dashboardState';
+import FilterScopeSelector from '../components/filterscope/FilterScopeSelector';
- Object.keys(columns).forEach(key => {
- if (
- Array.isArray(columns[key])
- ? columns[key].length
- : columns[key] !== undefined
- ) {
- /* eslint-disable no-param-reassign */
- result[chartId] = {
- ...result[chartId],
- [key]: columns[key],
- };
- }
- });
+function mapStateToProps({ dashboardLayout, dashboardFilters, dashboardInfo }, ownProps) {
+ return {
+ dashboardFilters,
+ filterImmuneSlices: dashboardInfo.metadata.filterImmuneSlices || [],
+ filterImmuneSliceFields:
+ dashboardInfo.metadata.filterImmuneSliceFields || {},
+ layout: dashboardLayout.present,
+ // closeModal: ownProps.onCloseModal,
+ };
+}
- return result;
+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 7cd7c89..1525462 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,
@@ -32,11 +31,13 @@ import { buildActiveFilters } from '../util/activeDashboardFilters';
export const dashboardFilter = {
chartId: 0,
componentId: '',
+ filterName: '',
directPathToFilter: [],
- scope: DASHBOARD_ROOT_ID,
isDateFilter: false,
isInstantFilter: true,
columns: {},
+ labels: {},
+ scopes: {},
};
export default function dashboardFiltersReducer(dashboardFilters = {}, action) {
@@ -52,6 +53,7 @@ export default function dashboardFiltersReducer(dashboardFilters = {}, action) {
...dashboardFilter,
chartId,
componentId: component.id,
+ filterName: component.meta.sliceName,
directPathToFilter,
columns,
labels,
diff --git a/superset/assets/src/dashboard/reducers/getInitialState.js b/superset/assets/src/dashboard/reducers/getInitialState.js
index 85a62e3..185a8b0 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 c37d5e5..fd9288d 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 !important;
+ border-color: @pink !important;
}
}
}
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 0000000..15858ea
--- /dev/null
+++ b/superset/assets/src/dashboard/stylesheets/filter-scope-selector.less
@@ -0,0 +1,168 @@
+/**
+ * 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-family: @font-family-sans-serif;
+ font-size: 14px;
+
+ .filter-scope-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ input {
+ flex: 0 0 200px;
+ }
+
+ .multi-edit-mode.filter-text {
+ display: none;
+ }
+ }
+
+ .nav.nav-tabs {
+ border: none;
+ }
+}
+
+.filters-scope-selector {
+ margin: 20px -24px;
+ 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;
+ }
+
+ .filter-field-pane .edit-mode-toggle,
+ .filter-scope-pane .react-checkbox-tree .rct-icon.rct-icon-expand-all,
+ .filter-scope-pane .react-checkbox-tree .rct-icon.rct-icon-collapse-all {
+ font-size: 13px;
+ font-family: @font-family-sans-serif;
+ color: @brand-primary;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ .filter-field-pane {
+ width: 40%;
+ padding: 16px 16px 16px 24px;
+ border-right: 1px solid #ccc;
+
+ .rct-title {
+ display: block;
+ }
+ }
+
+ .filter-scope-pane {
+ flex: 1;
+ padding: 16px 24px 16px 16px;
+
+ .react-checkbox-tree {
+ flex-direction: column;
+ }
+ }
+
+ .react-checkbox-tree {
+ color: @almost-black;
+ font-size: 14px;
+
+ .filter-scope-type {
+ &::before {
+ border: 1px solid @gray-light;
+ border-radius: 4px;
+ padding: 2px 4px;
+ font-size: 10px;
+ margin-right: 4px;
+ font-weight: 400;
+ }
+
+ &.chart {
+ &::before {
+ content: 'Chart';
+ }
+ }
+
+ &.root {
+ font-weight: 700;
+ }
+
+ &.tab {
+ font-weight: 700;
+
+ &::before {
+ content: 'Tab';
+ }
+ }
+ }
+
+ .rct-checkbox {
+ svg {
+ position: relative;
+ top: 2px;
+ }
+ }
+
+ .rct-node-leaf {
+ .rct-bare-label {
+ &::before {
+ padding-left: 5px;
+ }
+ }
+ }
+
+ .rct-option .rct-icon {
+ &.rct-icon-expand-all {
+ &::before {
+ content: 'Expand all';
+ }
+ }
+
+ &.rct-icon-collapse-all {
+ &::before {
+ content: 'Collapse all';
+ }
+ }
+ }
+
+ .rct-options {
+ text-align: left;
+ }
+
+ .rct-text {
+ margin: 8px 0;
+ display: flex;
+ }
+ }
+
+ .multi-edit-mode {
+ &.filter-scope-pane {
+ .rct-node.rct-node-leaf {
+ display: none;
+ }
+ }
+ }
+}
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/stylesheets/index.less
index 01a0e3c..8ebce25 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 8c70577..ea8e4e5 100644
--- a/superset/assets/src/dashboard/util/activeDashboardFilters.js
+++ b/superset/assets/src/dashboard/util/activeDashboardFilters.js
@@ -17,14 +17,29 @@
* under the License.
*/
let activeFilters = {};
+let allFilterIds = [];
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 allFilterIds.includes(chartId);
+}
+
+export function getAllFilterIds() {
+ return allFilterIds;
+}
+
// non-empty filters from dashboardFilters,
// this function does not take into account: filter immune or filter scope settings
export function buildActiveFilters(allDashboardFilters = {}) {
+ allFilterIds = 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/dashboardFiltersColorMap.js b/superset/assets/src/dashboard/util/dashboardFiltersColorMap.js
index bb8f762..55e0b72 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 0000000..ca73256
--- /dev/null
+++ b/superset/assets/src/dashboard/util/getCurrentScopeChartIds.js
@@ -0,0 +1,60 @@
+/**
+ * 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,
+}) {
+ 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]));
+ }
+ }
+
+ let chartIds = [];
+ 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/stylesheets/index.less b/superset/assets/src/dashboard/util/getDashboardFilterKey.js
similarity index 67%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/dashboard/util/getDashboardFilterKey.js
index 01a0e3c..ffb4ab3 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/dashboard/util/getDashboardFilterKey.js
@@ -16,17 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+export function getDashboardFilterKey(chartId, column) {
+ return `${chartId}_${column}`;
+}
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+export function getDashboardFilterByKey(key) {
+ const [chartId, ...parts] = key.split('_');
+ const columnName = parts.slice().join('_');
+ return [chartId, columnName];
+}
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js
similarity index 53%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/dashboard/util/getFilterFieldNodesTree.js
index 01a0e3c..bf74129 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/dashboard/util/getFilterFieldNodesTree.js
@@ -16,17 +16,28 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+import { getDashboardFilterKey } from './getDashboardFilterKey';
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+export default function getFilterFieldNodesTree({
+ dashboardFilters = {},
+ isSingleEditMode = true,
+}) {
+ if (Object.keys(dashboardFilters).length === 0) {
+ return [];
+ }
+
+ return 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,
+ showCheckbox: !isSingleEditMode,
+ }));
+ return {
+ value: chartId,
+ label: filterName,
+ children,
+ showCheckbox: !isSingleEditMode,
+ };
+ });
+}
diff --git a/superset/assets/src/dashboard/util/getFilterScopeNodesTree.js b/superset/assets/src/dashboard/util/getFilterScopeNodesTree.js
new file mode 100644
index 0000000..3aa25e6
--- /dev/null
+++ b/superset/assets/src/dashboard/util/getFilterScopeNodesTree.js
@@ -0,0 +1,116 @@
+/**
+ * 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 { isFilterBox } from './activeDashboardFilters';
+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,
+];
+
+export default function getFilterScopeNodesTree({
+ components = {},
+ isSingleEditMode = true,
+ checkedFilterFields = [],
+}) {
+ function traverse(currentNode) {
+ if (!currentNode) {
+ return null;
+ }
+
+ const type = currentNode.type;
+ if (
+ CHART_TYPE === type &&
+ currentNode.meta.chartId &&
+ !isFilterBox(currentNode.meta.chartId)
+ ) {
+ const chartNode = {
+ value: currentNode.meta.chartId,
+ label:
+ currentNode.meta.sliceName || `${type} ${currentNode.meta.chartId}`,
+ type,
+ };
+
+ if (isSingleEditMode) {
+ return chartNode;
+ }
+
+ return {
+ ...chartNode,
+ children: checkedFilterFields.map(filterField => ({
+ value: `${currentNode.meta.chartId}:${filterField}`,
+ label: `${currentNode.meta.chartId}:${filterField}`,
+ type,
+ showCheckbox: false,
+ })),
+ };
+ }
+
+ let children = [];
+ if (currentNode.children && currentNode.children.length) {
+ currentNode.children.forEach(child => {
+ const cNode = traverse(components[child]);
+
+ const childType = components[child].type;
+ if (FILTER_SCOPE_CONTAINER_TYPES.includes(childType)) {
+ children.push(cNode);
+ } else {
+ children = children.concat(cNode);
+ }
+ });
+ }
+
+ if (FILTER_SCOPE_CONTAINER_TYPES.includes(type)) {
+ let label = '';
+ if (type === DASHBOARD_ROOT_TYPE) {
+ label = 'All dashboard';
+ } else {
+ label =
+ currentNode.meta && currentNode.meta.text
+ ? currentNode.meta.text
+ : `${type} ${currentNode.id}`;
+ }
+
+ return {
+ value: currentNode.id,
+ label,
+ type,
+ children,
+ };
+ }
+
+ return children;
+ }
+
+ if (Object.keys(components).length === 0) {
+ return [];
+ }
+
+ const root = traverse(components[DASHBOARD_ROOT_ID]);
+ return [
+ {
+ ...root,
+ },
+ ];
+}
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/util/getFilterScopeParentNodes.js
similarity index 61%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/dashboard/util/getFilterScopeParentNodes.js
index 01a0e3c..02a92a1 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/dashboard/util/getFilterScopeParentNodes.js
@@ -16,17 +16,24 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+export default function getFilterScopeParentNodes(nodes, depthLimit = 0) {
+ const parentNodes = [];
+ const traverse = (currentNode, depth) => {
+ if (!currentNode) {
+ return;
+ }
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+ if (currentNode.children && (depthLimit === 0 || depth < depthLimit)) {
+ parentNodes.push(currentNode.value);
+ currentNode.children.forEach(child => traverse(child, depth + 1));
+ }
+ };
+
+ if (nodes && nodes.length) {
+ nodes.forEach(node => {
+ traverse(node, 0);
+ });
+ }
+
+ return parentNodes;
+}
diff --git a/superset/assets/src/dashboard/stylesheets/index.less b/superset/assets/src/dashboard/util/getRevertedFilterScope.js
similarity index 57%
copy from superset/assets/src/dashboard/stylesheets/index.less
copy to superset/assets/src/dashboard/util/getRevertedFilterScope.js
index 01a0e3c..f8fe550 100644
--- a/superset/assets/src/dashboard/stylesheets/index.less
+++ b/superset/assets/src/dashboard/util/getRevertedFilterScope.js
@@ -16,17 +16,27 @@
* specific language governing permissions and limitations
* under the License.
*/
-@import './variables.less';
+export default function getRevertedFilterScope({
+ checked,
+ checkedFilterFields,
+ filterScopeMap,
+}) {
+ const checkedChartIdsByFilterField = checked.reduce((map, value) => {
+ const [chartId, filterField] = value.split(':');
+ return {
+ ...map,
+ [filterField]: (map[filterField] || []).concat(parseInt(chartId, 10)),
+ };
+ }, {});
-@import './builder.less';
-@import './builder-sidepane.less';
-@import './buttons.less';
-@import './dashboard.less';
-@import './dnd.less';
-@import './filter-indicator.less';
-@import './filter-indicator-tooltip.less';
-@import './grid.less';
-@import './hover-menu.less';
-@import './popover-menu.less';
-@import './resizable.less';
-@import './components/index.less';
+ return checkedFilterFields.reduce(
+ (map, filterField) => ({
+ ...map,
+ [filterField]: {
+ ...filterScopeMap[filterField],
+ checked: checkedChartIdsByFilterField[filterField],
+ },
+ }),
+ {},
+ );
+}
diff --git a/superset/assets/src/dashboard/util/propShapes.jsx b/superset/assets/src/dashboard/util/propShapes.jsx
index d4fb6dd..be04b81 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,10 +79,16 @@ 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,
});
+export const filterScopeNodePropShape = PropTypes.shape({
+ children: PropTypes.arrayOf(filterScopeNodePropShape),
+ label: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+});
+
export const dashboardStatePropShape = PropTypes.shape({
sliceIds: PropTypes.arrayOf(PropTypes.number).isRequired,
expandedSlices: PropTypes.object,
diff --git a/superset/assets/src/visualizations/FilterBox/FilterBox.css b/superset/assets/src/visualizations/FilterBox/FilterBox.css
index f546c9c..0b678e0 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 a2b9cc8..d4308f1 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];