mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
feat(dashboard): Highlight tabs that contain a chart in scope of focused native filter (#14865)
* feat(dashboard): Highlight tabs that contain a chart in scope of focused native filter * Optimizations and improvements * Use Set instead of array * Simplify logic * Change variable name
This commit is contained in:
parent
8519a09086
commit
f82a085175
@ -18,6 +18,7 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import { styled } from '@superset-ui/core';
|
||||||
|
|
||||||
import DashboardComponent from '../../containers/DashboardComponent';
|
import DashboardComponent from '../../containers/DashboardComponent';
|
||||||
import DragDroppable from '../dnd/DragDroppable';
|
import DragDroppable from '../dnd/DragDroppable';
|
||||||
@ -62,6 +63,17 @@ const defaultProps = {
|
|||||||
onResizeStop() {},
|
onResizeStop() {},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const TabTitleContainer = styled.div`
|
||||||
|
${({ isHighlighted, theme: { gridUnit, colors } }) => `
|
||||||
|
padding: ${gridUnit}px ${gridUnit * 2}px;
|
||||||
|
margin: ${-gridUnit}px ${gridUnit * -2}px;
|
||||||
|
transition: box-shadow 0.2s ease-in-out;
|
||||||
|
${
|
||||||
|
isHighlighted && `box-shadow: 0 0 ${gridUnit}px ${colors.primary.light1};`
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
export default class Tab extends React.PureComponent {
|
export default class Tab extends React.PureComponent {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@ -192,6 +204,7 @@ export default class Tab extends React.PureComponent {
|
|||||||
editMode,
|
editMode,
|
||||||
filters,
|
filters,
|
||||||
isFocused,
|
isFocused,
|
||||||
|
isHighlighted,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -205,7 +218,11 @@ export default class Tab extends React.PureComponent {
|
|||||||
editMode={editMode}
|
editMode={editMode}
|
||||||
>
|
>
|
||||||
{({ dropIndicatorProps, dragSourceRef }) => (
|
{({ dropIndicatorProps, dragSourceRef }) => (
|
||||||
<div className="dragdroppable-tab" ref={dragSourceRef}>
|
<TabTitleContainer
|
||||||
|
isHighlighted={isHighlighted}
|
||||||
|
className="dragdroppable-tab"
|
||||||
|
ref={dragSourceRef}
|
||||||
|
>
|
||||||
<EditableTitle
|
<EditableTitle
|
||||||
title={component.meta.text}
|
title={component.meta.text}
|
||||||
defaultTitle={component.meta.defaultText}
|
defaultTitle={component.meta.defaultText}
|
||||||
@ -225,7 +242,7 @@ export default class Tab extends React.PureComponent {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{dropIndicatorProps && <div {...dropIndicatorProps} />}
|
{dropIndicatorProps && <div {...dropIndicatorProps} />}
|
||||||
</div>
|
</TabTitleContainer>
|
||||||
)}
|
)}
|
||||||
</DragDroppable>
|
</DragDroppable>
|
||||||
);
|
);
|
||||||
|
@ -33,7 +33,38 @@ import getLeafComponentIdFromPath from '../../util/getLeafComponentIdFromPath';
|
|||||||
import { componentShape } from '../../util/propShapes';
|
import { componentShape } from '../../util/propShapes';
|
||||||
import { NEW_TAB_ID, DASHBOARD_ROOT_ID } from '../../util/constants';
|
import { NEW_TAB_ID, DASHBOARD_ROOT_ID } from '../../util/constants';
|
||||||
import { RENDER_TAB, RENDER_TAB_CONTENT } from './Tab';
|
import { RENDER_TAB, RENDER_TAB_CONTENT } from './Tab';
|
||||||
import { TAB_TYPE } from '../../util/componentTypes';
|
import { CHART_TYPE, TAB_TYPE } from '../../util/componentTypes';
|
||||||
|
import { getChartIdsInFilterScope } from '../../util/activeDashboardFilters';
|
||||||
|
|
||||||
|
const findTabsWithChartsInScope = (
|
||||||
|
dashboardLayout,
|
||||||
|
chartsInScope,
|
||||||
|
childId,
|
||||||
|
tabId,
|
||||||
|
tabsToHighlight,
|
||||||
|
) => {
|
||||||
|
if (
|
||||||
|
dashboardLayout[childId].type === CHART_TYPE &&
|
||||||
|
chartsInScope.includes(dashboardLayout[childId].meta.chartId)
|
||||||
|
) {
|
||||||
|
tabsToHighlight.add(tabId);
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
dashboardLayout[childId].children.length === 0 ||
|
||||||
|
(dashboardLayout[childId].type === TAB_TYPE && tabsToHighlight.has(childId))
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dashboardLayout[childId].children.forEach(subChildId =>
|
||||||
|
findTabsWithChartsInScope(
|
||||||
|
dashboardLayout,
|
||||||
|
chartsInScope,
|
||||||
|
subChildId,
|
||||||
|
tabId,
|
||||||
|
tabsToHighlight,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
id: PropTypes.string.isRequired,
|
id: PropTypes.string.isRequired,
|
||||||
@ -268,11 +299,30 @@ class Tabs extends React.PureComponent {
|
|||||||
renderHoverMenu,
|
renderHoverMenu,
|
||||||
isComponentVisible: isCurrentTabVisible,
|
isComponentVisible: isCurrentTabVisible,
|
||||||
editMode,
|
editMode,
|
||||||
|
focusedFilterScope,
|
||||||
|
dashboardLayout,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const { children: tabIds } = tabsComponent;
|
const { children: tabIds } = tabsComponent;
|
||||||
const { tabIndex: selectedTabIndex, activeKey } = this.state;
|
const { tabIndex: selectedTabIndex, activeKey } = this.state;
|
||||||
|
|
||||||
|
const tabsToHighlight = new Set();
|
||||||
|
if (focusedFilterScope) {
|
||||||
|
const chartsInScope = getChartIdsInFilterScope({
|
||||||
|
filterScope: focusedFilterScope.scope,
|
||||||
|
});
|
||||||
|
tabIds.forEach(tabId => {
|
||||||
|
if (!tabsToHighlight.has(tabId)) {
|
||||||
|
findTabsWithChartsInScope(
|
||||||
|
dashboardLayout,
|
||||||
|
chartsInScope,
|
||||||
|
tabId,
|
||||||
|
tabId,
|
||||||
|
tabsToHighlight,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<DragDroppable
|
<DragDroppable
|
||||||
component={tabsComponent}
|
component={tabsComponent}
|
||||||
@ -322,6 +372,9 @@ class Tabs extends React.PureComponent {
|
|||||||
columnWidth={columnWidth}
|
columnWidth={columnWidth}
|
||||||
onDropOnTab={this.handleDropOnTab}
|
onDropOnTab={this.handleDropOnTab}
|
||||||
isFocused={activeKey === tabId}
|
isFocused={activeKey === tabId}
|
||||||
|
isHighlighted={
|
||||||
|
activeKey !== tabId && tabsToHighlight.has(tabId)
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
@ -107,6 +107,7 @@ function mapStateToProps(
|
|||||||
const component = dashboardLayout[id];
|
const component = dashboardLayout[id];
|
||||||
const props = {
|
const props = {
|
||||||
component,
|
component,
|
||||||
|
dashboardLayout,
|
||||||
parentComponent: dashboardLayout[parentId],
|
parentComponent: dashboardLayout[parentId],
|
||||||
editMode: dashboardState.editMode,
|
editMode: dashboardState.editMode,
|
||||||
undoLength: undoableLayout.past.length,
|
undoLength: undoableLayout.past.length,
|
||||||
|
Loading…
Reference in New Issue
Block a user