Skip to content

Commit

Permalink
feat(viz-gallery): add 'feature' tag and fuzzy search weighting (#18662)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
stephenLYZ and rusackas authored Mar 11, 2022
1 parent 3a78165 commit 7524e1e
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import { Behavior } from '../types/Base';
import { Behavior, ChartLabel } from '../types/Base';

interface LookupTable {
[key: string]: boolean;
Expand All @@ -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 {
Expand Down Expand Up @@ -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,
Expand All @@ -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;
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {};
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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>
);
};
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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 => (
Expand Down

0 comments on commit 7524e1e

Please sign in to comment.