Change current thumbnails to smaller ones. (#4430)

* Change current thumbnails to smaller ones.

* More density in the VizTypesControl modal

MANIFEST.in

@@ -3,6 +3,7 @@ recursive-include superset/migrations *
 recursive-include superset/static *
 recursive-exclude superset/static/docs *
 recursive-exclude superset/static/spec *
+recursive-exclude superset/static/images/viz_thumbnails_large *
 recursive-exclude superset/static/assets/node_modules *
 recursive-include superset/templates *
 recursive-include superset/translations *

docs/gallery.rst

@@ -2,88 +2,88 @@ Gallery
 =======
 
 .. image:: _static/img/viz_thumbnails/line.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/bubble.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/table.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/pie.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/bar.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/world_map.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/sankey.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/word_cloud.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/filter_box.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/pivot_table.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/directed_force.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/compare.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/sunburst.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/area.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/big_number.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/big_number_total.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/bullet.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/dist_bar.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/heatmap.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/markup.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/para.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/iframe.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/box_plot.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/treemap.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/cal_heatmap.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/horizon.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/mapbox.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/separator.png
-   :scale: 25 %
+   :scale: 50 %
 
 .. image:: _static/img/viz_thumbnails/histogram.png
-   :scale: 25 %
+   :scale: 50 %

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

@@ -63,7 +63,7 @@ export default class VizTypeControl extends React.PureComponent {
           src={`/static/assets/images/viz_thumbnails/${vt}.png`}
         />
         <div className="viztype-label">
-          <strong>{visTypes[vt].label}</strong>
+          {visTypes[vt].label}
         </div>
       </div>);
   }
@@ -72,13 +72,13 @@ export default class VizTypeControl extends React.PureComponent {
     const filteredVizTypes = Object.keys(visTypes)
       .filter(vt => filter.length === 0 || visTypes[vt].label.toLowerCase().includes(filter));
 
-    const imgPerRow = 4;
+    const imgPerRow = 6;
     const rows = [];
     for (let i = 0; i <= filteredVizTypes.length; i += imgPerRow) {
       rows.push(
         <Row key={`row-${i}`}>
           {filteredVizTypes.slice(i, i + imgPerRow).map(vt => (
-            <Col md={3} key={`grid-col-${vt}`}>
+            <Col md={12 / imgPerRow} key={`grid-col-${vt}`}>
               {this.renderVizType(vt)}
             </Col>
           ))}

superset/assets/javascripts/explore/main.css

@@ -45,6 +45,7 @@
 
 .viztype-label {
   text-align: center;
+  font-size: 12px;
 }
 
 .viztype-selector-container {