Fixes explore view when no slice is defined (#924)

caravel/assets/javascripts/explore/explore.jsx

@@ -476,7 +476,7 @@ $(document).ready(function () {
   initExploreView();
 
   // Dynamically register this visualization
-  px.registerViz(data.viz_name);
+  px.registerViz(data.viz_name || 'table');
 
   slice = px.Slice(data);
 

caravel/assets/stylesheets/less/bootswatch.less

@@ -44,13 +44,18 @@
     background-size: 200%;
     background-position: 50%;
 
+    border: 1px solid #AAA;
+
     &:focus {
       background-color: @bg;
+      outline:0;
     }
 
     &:hover,
     &:active:hover {
-      background-color: darken(@bg, 6%);
+      background-color: darken(@bg, 12%);
+      border: 1px solid #888;
+      .box-shadow(0px 0px 2px rgba(0,0,0,.4));
     }
 
     &:active {
@@ -73,7 +78,7 @@
 }
 .btn {
   text-transform: uppercase;
-  .box-shadow(0px 0px 2px rgba(0,0,0,.4));
+  border: 1px solid #AAA;
   .transition(all 0.4s);
 
   &-link {
@@ -102,7 +107,7 @@
   .btn + .btn-group,
   .btn-group + .btn,
   .btn-group + .btn-group {
-    margin-left: 0;
+    margin-left: -1;
   }
 
   &-vertical {
@@ -132,8 +137,9 @@ button {
   letter-spacing: .1px;
 }
 
-a {
+tbody a {
   .transition(all 0.2s);
+  text-decoration: underline;
 }
 
 // Tables =====================================================================
@@ -414,27 +420,33 @@ input[type="checkbox"],
 
 .nav-tabs {
   > li > a,
-  > li > a:hover
+  > li > a:hover,
   > li > a:focus {
-    margin-right: 0;
+    padding: 3px 10px;
-    background-color: transparent;
+    background-color: #ddd;
-    border: 1px solid #ccc;
+    border: 1px solid #aaa;
+    color: #888;
     margin-right: 1px;
-    border-radius: 10px 10px 0px 0px;
+    border-radius: 5px 5px 0px 0px;
-    color: @navbar-default-link-color;
     .transition(all 0.2s);
 
     &:hover {
-      color: @brand-primary;
+      margin-right: 1px;
+      border-color: #aaa;
+      background-color: #eee;
+      color: black;
     }
   }
 
   & > li.active > a,
-  & > li.active > a:hover
+  & > li.active > a:hover,
   & > li.active > a:focus {
 
+    padding: 3px 10px;
     border: 1px solid #aaa;
-    border-bottom: 3px solid black;
+    border-radius: 5px 5px 0px 0px;
+    color: @brand-primary;
+    background-color: #fff;
     margin-right: 1px;
     &:hover {
       color: @brand-primary;

caravel/templates/appbuilder/navbar.html

@@ -10,7 +10,7 @@
         <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="{{appbuilder.get_url_for_index}}">
-        <img width="75" src="/static/assets/images/caravel.png" style="padding-top:8px;" alt="">
+        <img width="75" src="/static/assets/images/caravel.png" style="padding-top: 6px;" alt="">
       </a>
     </div>
     <div class="navbar-collapse collapse">

caravel/templates/caravel/explore.html

@@ -48,7 +48,7 @@
                 </select>
               </span>
               <a href="{{ datasource.url }}" data-toggle="tooltip" title="Edit/configure datasource">
-                <i class="fa fa-edit m-l-3" />
+                <i class="fa fa-edit m-l-3"></i>
               </a>
             </div>
             <br/>
@@ -172,14 +172,28 @@
         {% block messages %}{% endblock %}
         {% include 'appbuilder/flash.html' %}
         <div class="slice-name__container">
-          <span class="favstar" class_name="Slice" obj_id="{{ slice.id }}"></span>
+          {% if slice %}
-          <div class="slice-name__text">{{slice.slice_name}}</div>
+            <span class="favstar" class_name="Slice" obj_id="{{ slice.id }}"></span>
-          <a href="/slicemodelview/edit/{{ slice.id }}" data-toggle="tooltip" title="Edit Description" class="edit-slice-description-icon">
+            <div class="slice-name__text">{{ slice.slice_name }} </div>
-            {% if slice.description %}
+            <a
-              <i class="fa fa-question-circle-o" data-toggle="tooltip" data-placement="bottom" title="{{ slice.description }}"></i>
+              href="/slicemodelview/edit/{{ slice.id }}"
-            {% endif %}
+              data-toggle="tooltip"
-            <i class="fa fa-edit"></i>
+              title="Edit Description"
-          </a>
+              class="edit-slice-description-icon"
+            >
+              {% if slice.description %}
+                <i
+                  class="fa fa-question-circle-o"
+                  data-toggle="tooltip"
+                  data-placement="bottom"
+                  title="{{ slice.description }}">
+                </i>
+              {% endif %}
+              <i class="fa fa-edit"></i>
+            </a>
+          {% else %}
+            <div class="slice-name__text">&nbsp;</div>
+          {% endif %}
           <div class="slice-meta pull-right">
             <span id="is_cached" class="label label-default" title="{{ _("Force refresh" )}}" data-toggle="tooltip">
               cached