diff --git a/caravel/assets/images/noimg.png b/caravel/assets/images/noimg.png
new file mode 100644
index 0000000000000..b311e6ee073dc
Binary files /dev/null and b/caravel/assets/images/noimg.png differ
diff --git a/caravel/assets/images/viz_thumbnails/stacked.png b/caravel/assets/images/viz_thumbnails/area.png
similarity index 100%
rename from caravel/assets/images/viz_thumbnails/stacked.png
rename to caravel/assets/images/viz_thumbnails/area.png
diff --git a/caravel/assets/images/viz_thumbnails/bar.png b/caravel/assets/images/viz_thumbnails/bar.png
index b41014788a2f9..ab0e8d9915350 100644
Binary files a/caravel/assets/images/viz_thumbnails/bar.png and b/caravel/assets/images/viz_thumbnails/bar.png differ
diff --git a/caravel/assets/images/viz_thumbnails/big_number_total.png b/caravel/assets/images/viz_thumbnails/big_number_total.png
new file mode 100644
index 0000000000000..eb4b345731754
Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/big_number_total.png differ
diff --git a/caravel/assets/images/viz_thumbnails/percent_change.png b/caravel/assets/images/viz_thumbnails/compare.png
similarity index 100%
rename from caravel/assets/images/viz_thumbnails/percent_change.png
rename to caravel/assets/images/viz_thumbnails/compare.png
diff --git a/caravel/assets/images/viz_thumbnails/dist_bar.png b/caravel/assets/images/viz_thumbnails/dist_bar.png
new file mode 100644
index 0000000000000..b41014788a2f9
Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/dist_bar.png differ
diff --git a/caravel/assets/images/viz_thumbnails/filter.png b/caravel/assets/images/viz_thumbnails/filter_box.png
similarity index 100%
rename from caravel/assets/images/viz_thumbnails/filter.png
rename to caravel/assets/images/viz_thumbnails/filter_box.png
diff --git a/caravel/assets/images/viz_thumbnails/heatmap.png b/caravel/assets/images/viz_thumbnails/heatmap.png
new file mode 100644
index 0000000000000..ac81a45881d43
Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/heatmap.png differ
diff --git a/caravel/assets/images/viz_thumbnails/markup.png b/caravel/assets/images/viz_thumbnails/markup.png
new file mode 100644
index 0000000000000..675e42a89fbfd
Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/markup.png differ
diff --git a/caravel/assets/images/viz_thumbnails/para.png b/caravel/assets/images/viz_thumbnails/para.png
new file mode 100644
index 0000000000000..fc1a157345568
Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/para.png differ
diff --git a/caravel/assets/images/viz_thumbnails/world_map.png b/caravel/assets/images/viz_thumbnails/world_map.png
new file mode 100644
index 0000000000000..82e8ad2d10d57
Binary files /dev/null and b/caravel/assets/images/viz_thumbnails/world_map.png differ
diff --git a/caravel/assets/javascripts/explore.js b/caravel/assets/javascripts/explore.js
index 5bf628d10503d..1f655b5ab9810 100644
--- a/caravel/assets/javascripts/explore.js
+++ b/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 $(
+ '' +
+ '' + viz.text + ''
+ );
+ }
$(".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'
});
diff --git a/caravel/assets/stylesheets/caravel.css b/caravel/assets/stylesheets/caravel.css
index ae0cfa344eef3..0dfbf15449aba 100644
--- a/caravel/assets/stylesheets/caravel.css
+++ b/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;
}
diff --git a/caravel/templates/caravel/explore.html b/caravel/templates/caravel/explore.html
index d9d7d2c679ae9..029cc14add459 100644
--- a/caravel/templates/caravel/explore.html
+++ b/caravel/templates/caravel/explore.html
@@ -40,7 +40,7 @@
- {{ form.get_field("viz_type")(class_="select2") }}
+ {{ form.get_field("viz_type")(class_="select2-with-images") }}
{% if slice %}
diff --git a/docs/gallery.rst b/docs/gallery.rst
index 16d9af24e4909..ca0376a575608 100644
--- a/docs/gallery.rst
+++ b/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 %
+