Showing thumbsnails when switching viz (#313)

* Showing thumbsnails when switching viz

* Adding missing images

* linting

caravel/assets/javascripts/explore.js

@@ -206,6 +206,14 @@ function initExploreView() {
   for (var i = 0; i < collapsed_fieldsets.length; i++) {
     toggle_fieldset($('legend:contains("' + collapsed_fieldsets[i] + '")'), false);
   }
+  function formatViz(viz) {
+    var url = '/static/assets/images/viz_thumbnails/' + viz.id + '.png';
+    var no_img = '/static/assets/images/noimg.png';
+    return $(
+      '<img class="viz-thumb-option" src="' + url + '" onerror="this.src=\'' + no_img + '\';">' +
+      '<span>' + viz.text + '</span>'
+    );
+  }
 
   $(".select2").select2({
     dropdownAutoWidth: true
@@ -213,6 +221,11 @@ function initExploreView() {
   $(".select2Sortable").select2({
     dropdownAutoWidth: true
   });
+  $(".select2-with-images").select2({
+    dropdownAutoWidth: true,
+    dropdownCssClass: "bigdrop",
+    formatResult: formatViz
+  });
   $(".select2Sortable").select2Sortable({
     bindOrder: 'sortableStop'
   });

caravel/assets/stylesheets/caravel.css

@@ -173,6 +173,16 @@ img.loading {
   width: 20px;
   margin: 5px;
 }
+img.viz-thumb-option {
+    width: 100px;
+    border: 1px solid gray;
+    margin-right: 5px;
+    border-radius: 5px;
+}
+.select2-drop.bigdrop .select2-results {
+    max-height: 700px;
+}
+
 .dashboard .title {
   text-align: center;
 }

caravel/templates/caravel/explore.html

@@ -40,7 +40,7 @@
             <i class="fa fa-edit"></i>&nbsp;
           </a>
           <span title="Visualization Type" data-toggle="tooltip">
-            {{ form.get_field("viz_type")(class_="select2") }}
+            {{ form.get_field("viz_type")(class_="select2-with-images") }}
           </span>
           {% if slice %}
             <span class="btn btn-default notbtn" title="Slice" data-toggle="tooltip" data-placement="bottom">

docs/gallery.rst

@@ -22,7 +22,7 @@ Gallery
 .. image:: _static/img/viz_thumbnails/word_cloud.png
    :scale: 25 %
 
-.. image:: _static/img/viz_thumbnails/filter.png
+.. image:: _static/img/viz_thumbnails/filter_box.png
    :scale: 25 %
 
 .. image:: _static/img/viz_thumbnails/pivot_table.png
@@ -31,15 +31,36 @@ Gallery
 .. image:: _static/img/viz_thumbnails/force_directed.png
    :scale: 25 %
 
-.. image:: _static/img/viz_thumbnails/percent_change.png
+.. image:: _static/img/viz_thumbnails/compare.png
    :scale: 25 %
 
 .. image:: _static/img/viz_thumbnails/sunburst.png
    :scale: 25 %
 
-.. image:: _static/img/viz_thumbnails/stacked.png
+.. image:: _static/img/viz_thumbnails/area.png
    :scale: 25 %
 
 .. image:: _static/img/viz_thumbnails/big_number.png
    :scale: 25 %
 
+.. image:: _static/img/viz_thumbnails/area.png
+   :scale: 25 %
+
+.. image:: _static/img/viz_thumbnails/big_number_total.png
+   :scale: 25 %
+
+.. image:: _static/img/viz_thumbnails/dist_bar.png
+   :scale: 25 %
+
+.. image:: _static/img/viz_thumbnails/heatmap.png
+   :scale: 25 %
+
+.. image:: _static/img/viz_thumbnails/markup.png
+   :scale: 25 %
+
+.. image:: _static/img/viz_thumbnails/para.png
+   :scale: 25 %
+
+.. image:: _static/img/viz_thumbnails/world_map.png
+   :scale: 25 %
+