You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2023/02/27 14:07:26 UTC
[superset] 02/05: Style filter indicators
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch chore/rm-cross-filter-scoping
in repository https://gitbox.apache.org/repos/asf/superset.git
commit b9bbc3906e3dae57576b9a911c5aadb3a4745c5e
Author: geido <di...@gmail.com>
AuthorDate: Mon Feb 27 11:04:52 2023 +0100
Style filter indicators
---
.../dashboard/components/FiltersBadge/index.tsx | 34 ++++++++++++++++++----
.../src/dashboard/components/SliceHeader/index.tsx | 28 ++++++++----------
.../components/SliceHeaderControls/index.tsx | 13 +++------
3 files changed, 45 insertions(+), 30 deletions(-)
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
index c7748849a8..4d6cc7739c 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
@@ -20,7 +20,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { uniqWith } from 'lodash';
import cx from 'classnames';
-import { DataMaskStateWithId, Filters } from '@superset-ui/core';
+import { DataMaskStateWithId, Filters, styled } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import { usePrevious } from 'src/hooks/usePrevious';
import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
@@ -31,7 +31,6 @@ import {
RootState,
} from 'src/dashboard/types';
import DetailsPanelPopover from './DetailsPanel';
-import { Pill } from './Styles';
import {
Indicator,
IndicatorStatus,
@@ -43,6 +42,31 @@ export interface FiltersBadgeProps {
chartId: number;
}
+const StyledFilterCount = styled.div`
+ ${({ theme }) => `
+ .anticon {
+ cursor: pointer;
+ vertical-align: middle;
+ color: ${theme.colors.grayscale.base};
+ &:hover {
+ color: ${theme.colors.grayscale.light1}
+ }
+ }
+ .applied-count {
+ display: inline-block;
+ color: ${theme.colors.grayscale.light5};
+ background: ${theme.colors.primary.base};
+ border-radius: 100%;
+ font-size: ${theme.typography.sizes.s - 1}px;
+ margin-left: ${theme.gridUnit * 2}px;
+ vertical-align: middle;
+ text-align: center;
+ width: ${theme.gridUnit * 4}px;
+ height: ${theme.gridUnit * 4}px;
+ }
+ `}
+`;
+
const sortByStatus = (indicators: Indicator[]): Indicator[] => {
const statuses = [
IndicatorStatus.Applied,
@@ -248,7 +272,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
incompatibleIndicators={incompatibleIndicators}
onHighlightFilterSource={onHighlightFilterSource}
>
- <Pill
+ <StyledFilterCount
className={cx(
'filter-counts',
!!incompatibleIndicators.length && 'has-incompatible-filters',
@@ -258,7 +282,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
>
<Icons.Filter iconSize="m" />
{!isInactive && (
- <span data-test="applied-filter-count">
+ <span data-test="applied-filter-count" className="applied-count">
{appliedIndicators.length + appliedCrossFilterIndicators.length}
</span>
)}
@@ -271,7 +295,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
</span>
</>
) : null}
- </Pill>
+ </StyledFilterCount>
</DetailsPanelPopover>
);
};
diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
index a928933b54..fd39b88e16 100644
--- a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -36,10 +36,8 @@ import SliceHeaderControls, {
import FiltersBadge from 'src/dashboard/components/FiltersBadge';
import Icons from 'src/components/Icons';
import { RootState } from 'src/dashboard/types';
-import FilterIndicator from 'src/dashboard/components/FiltersBadge/FilterIndicator';
import { getSliceHeaderTooltip } from 'src/dashboard/util/getSliceHeaderTooltip';
import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';
-import { clearDataMask } from 'src/dataMask/actions';
type SliceHeaderProps = SliceHeaderControlsProps & {
innerRef?: string;
@@ -57,11 +55,14 @@ type SliceHeaderProps = SliceHeaderControlsProps & {
const annotationsLoading = t('Annotation layers are still loading.');
const annotationsError = t('One ore more annotation layers failed loading.');
-const CrossFilterIcon = styled(Icons.CursorTarget)`
- cursor: pointer;
- color: ${({ theme }) => theme.colors.primary.base};
- height: 22px;
- width: 22px;
+const CrossFilterIcon = styled(Icons.ApartmentOutlined)`
+ ${({ theme }) => `
+ cursor: default;
+ color: ${theme.colors.primary.base};
+ padding-top: ${theme.gridUnit}px;
+ height: ${theme.gridUnit * 5}px;
+ width: ${theme.gridUnit * 5}px;
+ `}
`;
const ChartHeaderStyles = styled.div`
@@ -250,16 +251,11 @@ const SliceHeader: FC<SliceHeaderProps> = ({
{crossFilterValue && (
<Tooltip
placement="top"
- title={
- <FilterIndicator
- indicator={indicator}
- text={t('Click to clear emitted filters')}
- />
- }
+ title={t(
+ 'This chart emits/applies cross-filters to other charts that use the same dataset',
+ )}
>
- <CrossFilterIcon
- onClick={() => dispatch(clearDataMask(slice?.slice_id))}
- />
+ <CrossFilterIcon iconSize="l" />
</Tooltip>
)}
{!uiConfig.hideChartControls && (
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 6604093935..bbb52f541f 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -36,6 +36,7 @@ import {
getChartMetadataRegistry,
QueryFormData,
styled,
+ SupersetTheme,
t,
useTheme,
} from '@superset-ui/core';
@@ -339,17 +340,8 @@ class SliceHeaderControls extends React.PureComponent<
addDangerToast = () => {},
supersetCanShare = false,
isCached = [],
- crossFiltersEnabled,
} = this.props;
- const crossFilterItems = getChartMetadataRegistry().items;
const isTable = slice.viz_type === 'table';
- const isCrossFilter = Object.entries(crossFilterItems)
- // @ts-ignore
- .filter(([, { value }]) =>
- value.behaviors?.includes(Behavior.INTERACTIVE_CHART),
- )
- .find(([key]) => key === slice.viz_type);
-
const cachedWhen = (cachedDttm || []).map(itemCachedDttm =>
moment.utc(itemCachedDttm).fromNow(),
);
@@ -534,6 +526,9 @@ class SliceHeaderControls extends React.PureComponent<
placement="bottomRight"
>
<span
+ css={(theme: SupersetTheme) => css`
+ padding-top: ${theme.gridUnit / 2}px;
+ `}
id={`slice_${slice.slice_id}-controls`}
role="button"
aria-label="More Options"