Sort Chart Types based on Usage

superset/assets/src/explore/components/controls/VizTypeControl.jsx

@@ -69,6 +69,49 @@ export default class VizTypeControl extends React.PureComponent {
       this.searchRef.focus();
     }
   }
+  buildVizTypeLookup(types) {
+    const lookup = new Map();
+    types.forEach((type) => {
+      lookup.set(type.key, type);
+    });
+    return lookup;
+  }
+  sortVizTypes(types) {
+    const defaultOrder = [
+      'line', 'big_number', 'table', 'filter_box', 'dist_bar', 'area', 'bar',
+      'deck_polygon', 'pie', 'time_table', 'pivot_table', 'histogram',
+      'big_number_total', 'deck_scatter', 'deck_hex', 'time_pivot', 'deck_arc',
+      'heatmap', 'deck_grid', 'dual_line', 'deck_screengrid', 'line_multi',
+      'treemap', 'box_plot', 'separator', 'sunburst', 'sankey', 'word_cloud',
+      'mapbox', 'kepler', 'cal_heatmap', 'rose', 'bubble', 'deck_geojson',
+      'horizon', 'markup', 'deck_multi', 'compare', 'partition', 'event_flow',
+      'deck_path', 'directed_force', 'world_map', 'paired_ttest', 'para',
+      'iframe', 'country_map',
+    ];
+
+    const sorted = [];
+    const loadedKeys = new Set();
+    const vizTypeLookup = this.buildVizTypeLookup(types);
+
+    // Sort based on the `defaultOrder`
+    defaultOrder.forEach((key) => {
+      const vizType = vizTypeLookup.get(key);
+      if (typeof vizType !== 'undefined') {
+        sorted.push(vizType);
+        loadedKeys.add(key);
+      }
+    });
+
+    // Load the rest of Viz Types not mandated by the `defualtOrder`
+    types.forEach((vizType) => {
+      if (!loadedKeys.has(vizType.key)) {
+        sorted.push(vizType);
+        loadedKeys.add(vizType.key);
+      }
+    });
+
+    return sorted;
+  }
   renderItem(entry) {
     const { value } = this.props;
     const { key, value: type } = entry;
@@ -94,8 +137,7 @@ export default class VizTypeControl extends React.PureComponent {
     const { value } = this.props;
 
     const registry = getChartMetadataRegistry();
-
-    const types = registry.entries();
+    const types = this.sortVizTypes(registry.entries());
     const filteredTypes = filter.length > 0
       ? types.filter(type => type.value.name.toLowerCase().includes(filter))
       : types;