feat(viz-gallery): add 'feature' tag and fuzzy search weighting (#18662)
* feat(viz-gallery): add 'feature' tag and fuzzy search weighting * add search weight * Update superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx Co-authored-by: Evan Rusackas <evan@preset.io> * Update superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx Co-authored-by: Evan Rusackas <evan@preset.io> * Update superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx Co-authored-by: Evan Rusackas <evan@preset.io> * Update superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx Co-authored-by: Evan Rusackas <evan@preset.io> * some improvements * take metadata out * use chartLabel enum to unify * add test chart * fix cache * Resolving TS Lint issue * Appeasing the linter * Removing one example implementation * Removing another example label implementation * Removing the third example label implementation Co-authored-by: Evan Rusackas <evan@preset.io>
This commit is contained in:
Stephen Liu
GitHub
parent
3a78165d13
commit
7524e1e3c8
|
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { Behavior } from '../types/Base';
|
||||
import { Behavior, ChartLabel } from '../types/Base';
|
||||
|
||||
interface LookupTable {
|
||||
[key: string]: boolean;
|
||||
|
|
@ -40,10 +40,13 @@ export interface ChartMetadataConfig {
|
|||
thumbnail: string;
|
||||
useLegacyApi?: boolean;
|
||||
behaviors?: Behavior[];
|
||||
deprecated?: boolean;
|
||||
exampleGallery?: ExampleImage[];
|
||||
tags?: string[];
|
||||
category?: string | null;
|
||||
label?: {
|
||||
name?: ChartLabel;
|
||||
description?: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export default class ChartMetadata {
|
||||
|
|
@ -71,14 +74,17 @@ export default class ChartMetadata {
|
|||
|
||||
enableNoResults: boolean;
|
||||
|
||||
deprecated: boolean;
|
||||
|
||||
exampleGallery: ExampleImage[];
|
||||
|
||||
tags: string[];
|
||||
|
||||
category: string | null;
|
||||
|
||||
label?: {
|
||||
name?: ChartLabel;
|
||||
description?: string;
|
||||
} | null;
|
||||
|
||||
constructor(config: ChartMetadataConfig) {
|
||||
const {
|
||||
name,
|
||||
|
|
@ -92,10 +98,10 @@ export default class ChartMetadata {
|
|||
behaviors = [],
|
||||
datasourceCount = 1,
|
||||
enableNoResults = true,
|
||||
deprecated = false,
|
||||
exampleGallery = [],
|
||||
tags = [],
|
||||
category = null,
|
||||
label = null,
|
||||
} = config;
|
||||
|
||||
this.name = name;
|
||||
|
|
@ -118,10 +124,10 @@ export default class ChartMetadata {
|
|||
this.behaviors = behaviors;
|
||||
this.datasourceCount = datasourceCount;
|
||||
this.enableNoResults = enableNoResults;
|
||||
this.deprecated = deprecated;
|
||||
this.exampleGallery = exampleGallery;
|
||||
this.tags = tags;
|
||||
this.category = category;
|
||||
this.label = label;
|
||||
}
|
||||
|
||||
canBeAnnotationType(type: string): boolean {
|
||||
|
|
|
|||
|
|
@ -52,4 +52,22 @@ export interface PlainObject {
|
|||
[key: string]: any;
|
||||
}
|
||||
|
||||
export enum ChartLabel {
|
||||
VERIFIED = 'VERIFIED',
|
||||
DEPRECATED = 'DEPRECATED',
|
||||
FEATURED = 'FEATURED',
|
||||
}
|
||||
|
||||
export const ChartLabelWeight = {
|
||||
[ChartLabel.DEPRECATED]: {
|
||||
weight: -0.1,
|
||||
},
|
||||
[ChartLabel.VERIFIED]: {
|
||||
weight: 0.2,
|
||||
},
|
||||
[ChartLabel.FEATURED]: {
|
||||
weight: 0.1,
|
||||
},
|
||||
};
|
||||
|
||||
export default {};
|
||||
|
|
|
|||
|
|
@ -33,8 +33,11 @@ import {
|
|||
ChartMetadata,
|
||||
SupersetTheme,
|
||||
useTheme,
|
||||
ChartLabel,
|
||||
ChartLabelWeight,
|
||||
} from '@superset-ui/core';
|
||||
import { AntdCollapse } from 'src/components';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { Input } from 'src/components/Input';
|
||||
import Label from 'src/components/Label';
|
||||
import { usePluginContext } from 'src/components/DynamicPlugins';
|
||||
|
|
@ -310,6 +313,7 @@ const Examples = styled.div`
|
|||
const thumbnailContainerCss = (theme: SupersetTheme) => css`
|
||||
cursor: pointer;
|
||||
width: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
min-width: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
|
||||
|
|
@ -333,6 +337,38 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css`
|
|||
}
|
||||
`;
|
||||
|
||||
const HighlightLabel = styled.div`
|
||||
${({ theme }) => `
|
||||
border: 1px solid ${theme.colors.primary.dark1};
|
||||
box-sizing: border-box;
|
||||
border-radius: ${theme.gridUnit}px;
|
||||
background: ${theme.colors.grayscale.light5};
|
||||
line-height: ${theme.gridUnit * 2.5}px;
|
||||
color: ${theme.colors.primary.dark1};
|
||||
font-size: ${theme.typography.sizes.s}px;
|
||||
font-weight: ${theme.typography.weights.bold};
|
||||
text-align: center;
|
||||
padding: ${theme.gridUnit * 0.5}px ${theme.gridUnit}px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
|
||||
div {
|
||||
transform: scale(0.83,0.83);
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const ThumbnailLabelWrapper = styled.div`
|
||||
position: absolute;
|
||||
right: ${({ theme }) => theme.gridUnit}px;
|
||||
top: ${({ theme }) => theme.gridUnit * 19}px;
|
||||
`;
|
||||
|
||||
const TitleLabelWrapper = styled.div`
|
||||
display: inline-block !important;
|
||||
margin-left: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
`;
|
||||
|
||||
function vizSortFactor(entry: VizEntry) {
|
||||
if (typesWithDefaultOrder.has(entry.key)) {
|
||||
return DEFAULT_ORDER.indexOf(entry.key);
|
||||
|
|
@ -378,6 +414,13 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
|
|||
>
|
||||
{type.name}
|
||||
</div>
|
||||
{type.label?.name && (
|
||||
<ThumbnailLabelWrapper>
|
||||
<HighlightLabel>
|
||||
<div>{t(type.label?.name)}</div>
|
||||
</HighlightLabel>
|
||||
</ThumbnailLabelWrapper>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -460,7 +503,8 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
|||
.map(([key, value]) => ({ key, value }))
|
||||
.filter(
|
||||
({ value }) =>
|
||||
nativeFilterGate(value.behaviors || []) && !value.deprecated,
|
||||
nativeFilterGate(value.behaviors || []) &&
|
||||
value.label?.name !== ChartLabel.DEPRECATED,
|
||||
);
|
||||
result.sort((a, b) => vizSortFactor(a) - vizSortFactor(b));
|
||||
return result;
|
||||
|
|
@ -545,7 +589,18 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
|||
if (searchInputValue.trim() === '') {
|
||||
return [];
|
||||
}
|
||||
return fuse.search(searchInputValue).map(result => result.item);
|
||||
return fuse
|
||||
.search(searchInputValue)
|
||||
.map(result => result.item)
|
||||
.sort((a, b) => {
|
||||
const aName = a.value?.label?.name;
|
||||
const bName = b.value?.label?.name;
|
||||
const aOrder =
|
||||
aName && ChartLabelWeight[aName] ? ChartLabelWeight[aName].weight : 0;
|
||||
const bOrder =
|
||||
bName && ChartLabelWeight[bName] ? ChartLabelWeight[bName].weight : 0;
|
||||
return bOrder - aOrder;
|
||||
});
|
||||
}, [searchInputValue, fuse]);
|
||||
|
||||
const focusSearch = useCallback(() => {
|
||||
|
|
@ -739,9 +794,23 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
|
|||
<SectionTitle
|
||||
css={css`
|
||||
grid-area: viz-name;
|
||||
position: relative;
|
||||
`}
|
||||
>
|
||||
{selectedVizMetadata?.name}
|
||||
{selectedVizMetadata?.label?.name && (
|
||||
<Tooltip
|
||||
id="viz-badge-tooltip"
|
||||
placement="top"
|
||||
title={selectedVizMetadata.label?.description}
|
||||
>
|
||||
<TitleLabelWrapper>
|
||||
<HighlightLabel>
|
||||
<div>{t(selectedVizMetadata.label?.name)}</div>
|
||||
</HighlightLabel>
|
||||
</TitleLabelWrapper>
|
||||
</Tooltip>
|
||||
)}
|
||||
</SectionTitle>
|
||||
<TagsWrapper>
|
||||
{selectedVizMetadata?.tags.map(tag => (
|
||||
|
|
|
|||
Loading…
Reference in New Issue