mirror of https://github.com/apache/superset.git
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 PropTypes from 'prop-types';
|
||||
import { styled } from '@superset-ui/core';
|
||||
|
||||
import DashboardComponent from '../../containers/DashboardComponent';
|
||||
import DragDroppable from '../dnd/DragDroppable';
|
||||
|
@ -62,6 +63,17 @@ const defaultProps = {
|
|||
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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -192,6 +204,7 @@ export default class Tab extends React.PureComponent {
|
|||
editMode,
|
||||
filters,
|
||||
isFocused,
|
||||
isHighlighted,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
|
@ -205,7 +218,11 @@ export default class Tab extends React.PureComponent {
|
|||
editMode={editMode}
|
||||
>
|
||||
{({ dropIndicatorProps, dragSourceRef }) => (
|
||||
<div className="dragdroppable-tab" ref={dragSourceRef}>
|
||||
<TabTitleContainer
|
||||
isHighlighted={isHighlighted}
|
||||
className="dragdroppable-tab"
|
||||
ref={dragSourceRef}
|
||||
>
|
||||
<EditableTitle
|
||||
title={component.meta.text}
|
||||
defaultTitle={component.meta.defaultText}
|
||||
|
@ -225,7 +242,7 @@ export default class Tab extends React.PureComponent {
|
|||
)}
|
||||
|
||||
{dropIndicatorProps && <div {...dropIndicatorProps} />}
|
||||
</div>
|
||||
</TabTitleContainer>
|
||||
)}
|
||||
</DragDroppable>
|
||||
);
|
||||
|
|
|
@ -33,7 +33,38 @@ import getLeafComponentIdFromPath from '../../util/getLeafComponentIdFromPath';
|
|||
import { componentShape } from '../../util/propShapes';
|
||||
import { NEW_TAB_ID, DASHBOARD_ROOT_ID } from '../../util/constants';
|
||||
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 = {
|
||||
id: PropTypes.string.isRequired,
|
||||
|
@ -268,11 +299,30 @@ class Tabs extends React.PureComponent {
|
|||
renderHoverMenu,
|
||||
isComponentVisible: isCurrentTabVisible,
|
||||
editMode,
|
||||
focusedFilterScope,
|
||||
dashboardLayout,
|
||||
} = this.props;
|
||||
|
||||
const { children: tabIds } = tabsComponent;
|
||||
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 (
|
||||
<DragDroppable
|
||||
component={tabsComponent}
|
||||
|
@ -322,6 +372,9 @@ class Tabs extends React.PureComponent {
|
|||
columnWidth={columnWidth}
|
||||
onDropOnTab={this.handleDropOnTab}
|
||||
isFocused={activeKey === tabId}
|
||||
isHighlighted={
|
||||
activeKey !== tabId && tabsToHighlight.has(tabId)
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
|
|
|
@ -107,6 +107,7 @@ function mapStateToProps(
|
|||
const component = dashboardLayout[id];
|
||||
const props = {
|
||||
component,
|
||||
dashboardLayout,
|
||||
parentComponent: dashboardLayout[parentId],
|
||||
editMode: dashboardState.editMode,
|
||||
undoLength: undoableLayout.past.length,
|
||||
|
|
Loading…
Reference in New Issue