Slightly better layout for explore page

apache · Dec 13, 2015 · c97b0b6 · c97b0b6
1 parent 06c12e7
commit c97b0b6
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 61 deletions.
diff --git a/panoramix/forms.py b/panoramix/forms.py
@@ -339,6 +339,7 @@ class QueryForm(OmgWtForm):
             slice_name = HiddenField()
             previous_viz_type = HiddenField(default=viz.viz_type)
             collapsed_fieldsets = HiddenField()
+            viz_type = self.field_dict.get('viz_type')
 
         filter_cols = datasource.filterable_column_names or ['']
         for i in range(10):
@@ -361,6 +362,7 @@ class QueryForm(OmgWtForm):
                     if s:
                         setattr(QueryForm, s, px_form_fields[s])
 
+
         # datasource type specific form elements
         if datasource.__class__.__name__ == 'SqlaTable':
             QueryForm.fieldsets += ({

diff --git a/panoramix/migrations/versions/55179c7f25c7_sqla_descr.py b/panoramix/migrations/versions/55179c7f25c7_sqla_descr.py
@@ -0,0 +1,22 @@
+"""sqla_descr
+
+Revision ID: 55179c7f25c7
+Revises: 315b3f4da9b0
+Create Date: 2015-12-13 08:38:43.704145
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = '55179c7f25c7'
+down_revision = '315b3f4da9b0'
+
+from alembic import op
+import sqlalchemy as sa
+
+
+def upgrade():
+    op.add_column('tables', sa.Column('description', sa.Text(), nullable=True))
+
+
+def downgrade():
+    op.drop_column('tables', 'description')
diff --git a/panoramix/models.py b/panoramix/models.py
@@ -225,6 +225,7 @@ class SqlaTable(Model, Queryable, AuditMixinNullable):
     id = Column(Integer, primary_key=True)
     table_name = Column(String(250), unique=True)
     main_dttm_col = Column(String(250))
+    description = Column(Text)
     default_endpoint = Column(Text)
     database_id = Column(Integer, ForeignKey('dbs.id'), nullable=False)
     database = relationship(
@@ -241,6 +242,9 @@ def perm(self):
         return (
             "[{self.database}].[{self.table_name}]"
             "(id:{self.id})").format(self=self)
+    @property
+    def full_name(self):
+        return "[{self.database}].[{self.table_name}]".format(self=self)
 
     @property
     def dttm_cols(self):
@@ -694,6 +698,10 @@ def perm(self):
             "[{self.cluster_name}].[{self.datasource_name}]"
             "(id:{self.id})").format(self=self)
 
+    @property
+    def full_name(self):
+        return "[{self.cluster_name}].[{self.datasource_name}]".format(self=self)
+
     def __repr__(self):
         return self.datasource_name
 

diff --git a/panoramix/static/panoramix.css b/panoramix/static/panoramix.css
@@ -10,6 +10,19 @@ form div {
 .navbar-brand a {
   color: white;
 }
+
+.notbtn {
+    cursor: default;
+}
+
+span.title-block {
+    background-color: #EEE;
+    border-radius: 4px;
+    padding: 6px 12px;
+    margin: 0px 10px;
+    font-size: 20px;
+}
+
 fieldset.fs-style {
     font-family: Verdana, Arial, sans-serif;
     font-size: small;
@@ -18,7 +31,7 @@ fieldset.fs-style {
     background-color: #F4F4F4;
     border-radius: 6px;
     padding: 10px;
-    margin: 10px 0px;
+    margin: 0px 0px 10px 0px;
 }
 legend.legend-style {
     font-size: 14px;

diff --git a/panoramix/templates/panoramix/explore.html b/panoramix/templates/panoramix/explore.html
@@ -2,26 +2,44 @@
 {% block content_fluid %}
 {% set datasource = viz.datasource %}
 {% set form = viz.form %}
+
+{% macro panofield(fieldname)%}
+  <div>
+    {% set field = form.get_field(fieldname)%}
+    <div>
+      {{ viz.get_form_override(fieldname, 'label') or field.label }}
+      {% if field.description %}
+      <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
+        title="{{ viz.get_form_override(fieldname, 'description') or field.description }}"></i>
+      {% endif %}
+      {{ field(class_=form.field_css_classes(field.name)) }}
+    </div>
+  </div>
+{% endmacro %}
+
 <div class="container-fluid datasource">
-  <div class="row">
-    <div id="form_container" class="col-md-3">
-      <h4>
-        {{ datasource.name }}
+  <form id="query" method="GET" style="display: none;">
+  <div class="header">
+      <a class="btn btn-primary" data-toggle="tooltip" title="Slice!">
+        <i class="fa fa-bolt"></i>
+      </a>
+      <span class="btn btn-default notbtn">
+        <strong>{{ datasource.full_name }}</strong>
         {% if datasource.description %}
           <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="{{ datasource.description }}"></i>
         {% endif %}
-        <div class="btn-group pull-right" role="group" >
-          <a class="btn btn-default" href="/{{ datasource.baselink }}/edit/{{ datasource.id }}" data-toggle="tooltip" title="Edit datasource">
+          <a class="" href="/{{ datasource.baselink }}/edit/{{ datasource.id }}" data-toggle="tooltip" title="Edit datasource">
             <i class="fa fa-edit"></i>
           </a>
-          <button type="button" class="btn btn-default druidify" data-toggle="tooltip" title="Slice!">
-            <i class="fa fa-bolt"></i>
-          </button>
-        </div>
-      </h4>
+      </span>
+      <span class="">{{ form.get_field("viz_type")(class_="select2") }}</span>
+      <span class="btn btn-info pull-right"
+        data-toggle="modal" data-target="#query_modal">query</span>
+      <hr/>
+  </font>
+  <div class="row">
+    <div id="form_container" class="col-md-3">
 
-      <hr>
-      <form id="query" method="GET" style="display: none;">
       {% for fieldset in form.fieldsets %}
           <fieldset class="fs-style">
             {% if fieldset.label %}
@@ -38,30 +56,14 @@ <h4>
             <div class="fieldset_content">
             {% for fieldname in fieldset.fields %}
               {% if not fieldname.__iter__ %}
-              <div>
-                {% set field = form.get_field(fieldname)%}
-                <div>
-                  {{ viz.get_form_override(fieldname, 'label') or field.label }}
-                  {% if field.description %}
-                  <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
-                    title="{{ viz.get_form_override(fieldname, 'description') or field.description }}"></i>
-                  {% endif %}
-                  {{ field(class_=form.field_css_classes(field.name)) }}
-                </div>
-              </div>
+                {{ panofield(fieldname) }}
               {% else %}
               <div class="row">
                 <div class="form-group">
                   {% for name in fieldname %}
                   <div class="col-xs-{{ (12 / fieldname|length) | int }}">
                     {% if name %}
-                      {% set field = form.get_field(name)%}
-                      {{ viz.form_overrides.label or field.label }}
-                      {% if field.description %}
-                      <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
-                        title="{{ viz.get_form_override(fieldname, 'description') or field.description }}"></i>
-                      {% endif %}
-                      {{ field(class_=form.field_css_classes(field.name)) }}
+                      {{ panofield(name) }}
                     {% endif %}
                   </div>
                   {% endfor %}
@@ -90,7 +92,6 @@ <h4>
                   <span class="glyphicon glyphicon-minus"  aria-hidden="true"></span>
                 </button>
               </div>
-              <hr style="margin: 5px 0px;"/>
             </div>
             <div id="filters"></div>
             <button type="button" id="plus" class="btn btn-sm" aria-label="Add a filter">
@@ -112,7 +113,6 @@ <h4>
           <i class="fa fa-plus-circle"></i>
           Save as
         </button>
-        <hr style="margin-bottom: 0px;">
         <img src="{{ url_for("static", filename="img/tux_panoramix.png") }}" width=250>
         {{ form.slice_id() }}
         {{ form.slice_name() }}
@@ -122,20 +122,10 @@ <h4>
         <input type="hidden" name="datasource_id" value="{{ datasource.id }}">
         <input type="hidden" name="datasource_type" value="{{ datasource.type }}">
         <input type="hidden" name="previous_viz_type" value="{{ viz.viz_type or "table" }}">
-      </form><br>
+      <br>
     </div>
 
     <div class="col-md-9">
-      <h4>{{ viz.verbose_name }}
-        {% if False %}
-        <span class="label label-success">
-          {{ "{0:0.4f}".format(results.duration.total_seconds()) }} s
-        </span>
-        {% endif %}
-        <span class="label pull-right label-info btn"
-          data-toggle="modal" data-target="#query_modal">query</span>
-      </h4>
-      <hr/>
           {% block messages %}
           {% endblock %}
             {% include 'appbuilder/flash.html' %}
@@ -175,6 +165,7 @@ <h4 class="modal-title" id="myModalLabel">Query</h4>
       </div>
     </div>
   </div>
+  </form>
 </div>
 {% endblock %}
 
@@ -234,6 +225,7 @@ <h4 class="modal-title" id="myModalLabel">Query</h4>
     $('legend').click(function () {
       toggle_fieldset($(this), true);
     });
+    $("#viz_type").change(function() {$("#query").submit();});
     collapsed_fieldsets = get_collapsed_fieldsets();
     for(var i=0; i<collapsed_fieldsets.length;i++){
       toggle_fieldset($('legend:contains("' + collapsed_fieldsets[i] + '")'), false);

diff --git a/panoramix/views.py b/panoramix/views.py
@@ -140,8 +140,8 @@ class TableView(PanoramixModelView, DeleteMixin):
     list_columns = ['table_link', 'database', 'changed_by', 'changed_on_']
     add_columns = ['table_name', 'database', 'default_endpoint', 'offset']
     edit_columns = [
-        'table_name', 'database', 'main_dttm_col', 'default_endpoint',
-        'offset']
+        'table_name', 'database', 'description', 'main_dttm_col',
+        'default_endpoint', 'offset']
     related_views = [TableColumnInlineView, SqlMetricInlineView]
     base_order = ('changed_on','desc')
     description_columns = {

diff --git a/panoramix/viz.py b/panoramix/viz.py
@@ -28,7 +28,6 @@ class BaseViz(object):
     {
         'label': None,
         'fields': (
-            'viz_type',
             'granularity',
             ('since', 'until'),
             'metrics', 'groupby',
@@ -225,7 +224,6 @@ class TableViz(BaseViz):
     {
         'label': None,
         'fields': (
-            'viz_type',
             'granularity',
             ('since', 'until'),
             'metrics', 'groupby',
@@ -268,7 +266,6 @@ class PivotTableViz(BaseViz):
     {
         'label': None,
         'fields': (
-            'viz_type',
             'granularity',
             ('since', 'until'),
             'groupby',
@@ -324,7 +321,7 @@ class MarkupViz(BaseViz):
     fieldsets = (
     {
         'label': None,
-        'fields': ('viz_type', 'markup_type', 'code')
+        'fields': ('markup_type', 'code')
     },)
     is_timeseries = False
 
@@ -350,7 +347,7 @@ class WordCloudViz(BaseViz):
     {
         'label': None,
         'fields': (
-            'viz_type',
+            'granularity',
             ('since', 'until'),
             'groupby', 'metric', 'limit',
             ('size_from', 'size_to'),
@@ -402,7 +399,6 @@ class BubbleViz(NVD3Viz):
     {
         'label': None,
         'fields': (
-            'viz_type',
             ('since', 'until'),
             ('series', 'entity'),
             ('x', 'y'),
@@ -477,7 +473,6 @@ class BigNumberViz(BaseViz):
     {
         'label': None,
         'fields': (
-            'viz_type',
             'granularity',
             ('since', 'until'),
             'metric',
@@ -525,7 +520,6 @@ class NVD3TimeSeriesViz(NVD3Viz):
         {
             'label': None,
             'fields': (
-                'viz_type',
                 'granularity', ('since', 'until'),
                 'metrics',
                 'groupby', 'limit',
@@ -661,7 +655,6 @@ class NVD3TimeSeriesBarViz(NVD3TimeSeriesViz):
     {
         'label': None,
         'fields': (
-            'viz_type',
             'granularity', ('since', 'until'),
             'metrics',
             'groupby', 'limit',
@@ -678,7 +671,6 @@ class NVD3CompareTimeSeriesViz(NVD3TimeSeriesViz):
     {
         'label': None,
         'fields': (
-            'viz_type',
             'granularity', ('since', 'until'),
             'metrics',
             'groupby', 'limit',
@@ -696,7 +688,6 @@ class NVD3TimeSeriesStackedViz(NVD3TimeSeriesViz):
     {
         'label': None,
         'fields': (
-            'viz_type',
             'granularity', ('since', 'until'),
             'metrics',
             'groupby', 'limit',
@@ -714,7 +705,6 @@ class DistributionPieViz(NVD3Viz):
     {
         'label': None,
         'fields': (
-            'viz_type',
             ('since', 'until'),
             'metrics', 'groupby',
             'limit',
@@ -755,7 +745,7 @@ class DistributionBarViz(DistributionPieViz):
     {
         'label': None,
         'fields': (
-            'viz_type', 'metrics', 'groupby',
+            'metrics', 'groupby',
             ('since', 'until'),
             'limit',
             ('show_legend', None),
@@ -812,7 +802,7 @@ class SunburstViz(BaseViz):
     {
         'label': None,
         'fields': (
-            'viz_type',
+            'granularity',
             ('since', 'until'),
             'groupby',
             'metric', 'secondary_metric',