feat(viz-gallery): add 'feature' tag and fuzzy search weighting

superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts

@@ -44,6 +44,11 @@ export interface ChartMetadataConfig {
   exampleGallery?: ExampleImage[];
   tags?: string[];
   category?: string | null;
+  label?: {
+    name: string;
+    description: string;
+  };
+  searchWeight?: number;
 }
 
 export default class ChartMetadata {
@@ -79,6 +84,13 @@ export default class ChartMetadata {
 
   category: string | null;
 
+  label?: {
+    name: string;
+    description: string;
+  };
+
+  searchWeight: number;
+
   constructor(config: ChartMetadataConfig) {
     const {
       name,
@@ -96,6 +108,8 @@ export default class ChartMetadata {
       exampleGallery = [],
       tags = [],
       category = null,
+      label,
+      searchWeight = 0,
     } = config;
 
     this.name = name;
@@ -122,6 +136,8 @@ export default class ChartMetadata {
     this.exampleGallery = exampleGallery;
     this.tags = tags;
     this.category = category;
+    this.label = label;
+    this.searchWeight = searchWeight;
   }
 
   canBeAnnotationType(type: string): boolean {

superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js

@@ -45,6 +45,13 @@ const metadata = new ChartMetadata({
   ],
   thumbnail,
   useLegacyApi: true,
+  label: {
+    name: t('verified'),
+    description: t(
+      'This chart was tested and verified, so the overall experience should be stable.',
+    ),
+  },
+  searchWeight: 0.5,
 });
 
 export default class WorldMapChartPlugin extends ChartPlugin {

superset-frontend/plugins/legacy-preset-chart-nvd3/src/DistBar/index.js

@@ -51,6 +51,13 @@ const metadata = new ChartMetadata({
   ],
   thumbnail,
   useLegacyApi: true,
+  label: {
+    name: t('verified'),
+    description: t(
+      'This chart was tested and verified, so the overall experience should be stable.',
+    ),
+  },
+  searchWeight: 0.5,
 });
 
 export default class DistBarChartPlugin extends ChartPlugin {

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts

@@ -46,6 +46,13 @@ const metadata = new ChartMetadata({
     t('Description'),
   ],
   thumbnail,
+  label: {
+    name: t('verified'),
+    description: t(
+      'This chart was tested and verified, so the overall experience should be stable.',
+    ),
+  },
+  searchWeight: 0.5,
 });
 
 export default class BigNumberTotalChartPlugin extends ChartPlugin<

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts

@@ -45,6 +45,13 @@ const metadata = new ChartMetadata({
     t('Trend'),
   ],
   thumbnail,
+  label: {
+    name: t('verified'),
+    description: t(
+      'This chart was tested and verified, so the overall experience should be stable.',
+    ),
+  },
+  searchWeight: 0.5,
 });
 
 export default class BigNumberWithTrendlineChartPlugin extends ChartPlugin<

superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts

@@ -72,6 +72,13 @@ export default class EchartsPieChartPlugin extends ChartPlugin<
           t('ECharts'),
         ],
         thumbnail,
+        label: {
+          name: t('verified'),
+          description: t(
+            'This chart was tested and verified, so the overall experience should be stable.',
+          ),
+        },
+        searchWeight: 0.5,
       }),
       transformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts

@@ -83,6 +83,13 @@ export default class EchartsAreaChartPlugin extends ChartPlugin<
           t('Popular'),
         ],
         thumbnail,
+        label: {
+          name: t('verified'),
+          description: t(
+            'This chart was tested and verified, so the overall experience should be stable.',
+          ),
+        },
+        searchWeight: 0.5,
       }),
       transformProps: areaTransformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts

@@ -92,6 +92,13 @@ export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
           t('Popular'),
         ],
         thumbnail,
+        label: {
+          name: t('verified'),
+          description: t(
+            'This chart was tested and verified, so the overall experience should be stable.',
+          ),
+        },
+        searchWeight: 0.5,
       }),
       transformProps: barTransformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts

@@ -85,6 +85,13 @@ export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
           t('Popular'),
         ],
         thumbnail,
+        label: {
+          name: t('verified'),
+          description: t(
+            'This chart was tested and verified, so the overall experience should be stable.',
+          ),
+        },
+        searchWeight: 0.5,
       }),
       transformProps: lineTransformProps,
     });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts

@@ -86,6 +86,13 @@ export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
           t('Popular'),
         ],
         thumbnail,
+        label: {
+          name: t('verified'),
+          description: t(
+            'This chart was tested and verified, so the overall experience should be stable.',
+          ),
+        },
+        searchWeight: 0.5,
       }),
       transformProps: scatterTransformProps,
     });

superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts

@@ -54,6 +54,13 @@ export default class PivotTableChartPlugin extends ChartPlugin<
       name: t('Pivot Table v2'),
       tags: [t('Additive'), t('Report'), t('Tabular'), t('Popular')],
       thumbnail,
+      label: {
+        name: t('verified'),
+        description: t(
+          'This chart was tested and verified, so the overall experience should be stable.',
+        ),
+      },
+      searchWeight: 0.5,
     });
 
     super({

superset-frontend/plugins/plugin-chart-table/src/index.ts

@@ -51,6 +51,13 @@ const metadata = new ChartMetadata({
     t('Description'),
   ],
   thumbnail,
+  label: {
+    name: t('verified'),
+    description: t(
+      'This chart was tested and verified, so the overall experience should be stable.',
+    ),
+  },
+  searchWeight: 0.5,
 });
 
 export default class TableChartPlugin extends ChartPlugin<

superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx

@@ -34,7 +34,7 @@ import {
   SupersetTheme,
   useTheme,
 } from '@superset-ui/core';
-import { Collapse, Input } from 'src/common/components';
+import { Collapse, Input, Tooltip } from 'src/common/components';
 import Label from 'src/components/Label';
 import { usePluginContext } from 'src/components/DynamicPlugins';
 import Icons from 'src/components/Icons';
@@ -309,6 +309,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;
@@ -332,6 +333,38 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css`
   }
 `;
 
+const BetaBadge = styled.div`
+  ${({ theme }) => `
+    border: 1px solid #1985a0;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background: #ffffff;
+    line-height: ${theme.gridUnit * 2.5}px;
+    color: #1985a0;
+    font-size: 12px;
+    font-weight: 500;
+    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 ThumbnailBadgeWrapper = styled.div`
+  position: absolute;
+  right: ${({ theme }) => theme.gridUnit}px;
+  top: ${({ theme }) => theme.gridUnit * 19}px;
+`;
+
+const TitleBadgeWrapper = 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);
@@ -377,6 +410,13 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
       >
         {type.name}
       </div>
+      {type.label && (
+        <ThumbnailBadgeWrapper>
+          <BetaBadge>
+            <div>{type.label.name}</div>
+          </BetaBadge>
+        </ThumbnailBadgeWrapper>
+      )}
     </div>
   );
 };
@@ -544,7 +584,12 @@ 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) => (b.value?.searchWeight || 0) - (a.value?.searchWeight || 0),
+      );
   }, [searchInputValue, fuse]);
 
   const focusSearch = useCallback(() => {
@@ -738,9 +783,23 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
             <SectionTitle
               css={css`
                 grid-area: viz-name;
+                position: relative;
               `}
             >
               {selectedVizMetadata?.name}
+              {selectedVizMetadata?.label && (
+                <Tooltip
+                  id="viz-badge-tooltip"
+                  placement="top"
+                  title={selectedVizMetadata?.label.description}
+                >
+                  <TitleBadgeWrapper>
+                    <BetaBadge>
+                      <div>{selectedVizMetadata.label.name}</div>
+                    </BetaBadge>
+                  </TitleBadgeWrapper>
+                </Tooltip>
+              )}
             </SectionTitle>
             <TagsWrapper>
               {selectedVizMetadata?.tags.map(tag => (