diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx index 4094ecee74e1..f8b56f4ff2f8 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx @@ -60,6 +60,7 @@ export const datatableVisualization: Visualization groupLabel: i18n.translate('xpack.lens.datatable.groupLabel', { defaultMessage: 'Tabular and single value', }), + sortPriority: 1, }, ], diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx index ef8c0798bb91..5538dd26d032 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx @@ -219,12 +219,15 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { // reorganize visualizations in groups const grouped: Record< string, - Array< - VisualizationType & { - visualizationId: string; - selection: VisualizationSelection; - } - > + { + priority: number; + visualizations: Array< + VisualizationType & { + visualizationId: string; + selection: VisualizationSelection; + } + >; + } > = {}; // Will need it later on to quickly pick up the metadata from it const lookup: Record< @@ -240,13 +243,17 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { visualizationType.label.toLowerCase().includes(lowercasedSearchTerm) || visualizationType.fullLabel?.toLowerCase().includes(lowercasedSearchTerm); if (isSearchMatch) { - grouped[visualizationType.groupLabel] = grouped[visualizationType.groupLabel] || []; + grouped[visualizationType.groupLabel] = grouped[visualizationType.groupLabel] || { + priority: 0, + visualizations: [], + }; const visualizationEntry = { ...visualizationType, visualizationId, selection: getSelection(visualizationId, visualizationType.id), }; - grouped[visualizationType.groupLabel].push(visualizationEntry); + grouped[visualizationType.groupLabel].priority += visualizationType.sortPriority || 0; + grouped[visualizationType.groupLabel].visualizations.push(visualizationEntry); lookup[`${visualizationId}:${visualizationType.id}`] = visualizationEntry; } } @@ -254,9 +261,11 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) { return { visualizationTypes: Object.keys(grouped) - .sort() + .sort((groupA, groupB) => { + return grouped[groupB].priority - grouped[groupA].priority; + }) .flatMap((group): SelectableEntry[] => { - const visualizations = grouped[group]; + const { visualizations } = grouped[group]; if (visualizations.length === 0) { return []; } diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx index 34b9e4d2b252..e0977be7535a 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx @@ -55,6 +55,7 @@ export const metricVisualization: Visualization = { groupLabel: i18n.translate('xpack.lens.metric.groupLabel', { defaultMessage: 'Tabular and single value', }), + sortPriority: 1, }, ], diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 3d34d22c5048..94b4433a8255 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -550,6 +550,11 @@ export interface VisualizationType { * The group the visualization belongs to */ groupLabel: string; + /** + * The priority of the visualization in the list (global priority) + * Higher number means higher priority. When omitted defaults to 0 + */ + sortPriority?: number; } export interface Visualization {