From 5825f4539de92edcf784a43f3570ec745b4c50dc Mon Sep 17 00:00:00 2001
From: Maxime <maxime.beauchemin@airbnb.com>
Date: Wed, 9 Sep 2015 20:10:42 +0000
Subject: [PATCH] Allowing for form field description and tooltips

---
 panoramix/forms.py                            | 33 ++++++++++++++-----
 panoramix/templates/panoramix/datasource.html | 16 +++++++--
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/panoramix/forms.py b/panoramix/forms.py
index 874cf52963..7fc9555fd3 100644
--- a/panoramix/forms.py
+++ b/panoramix/forms.py
@@ -35,25 +35,42 @@ def form_factory(viz):
     px_form_fields = {
         'viz_type': SelectField(
             'Viz',
-            choices=[(k, v.verbose_name) for k, v in viz_types.items()]),
+            choices=[(k, v.verbose_name) for k, v in viz_types.items()],
+            description="The type of visualization to display"),
         'metrics': SelectMultipleField(
-            'Metrics', choices=datasource.metrics_combo),
+            'Metrics', choices=datasource.metrics_combo,
+            description="One or many metrics to display"),
         'groupby': SelectMultipleField(
             'Group by',
-            choices=[(s, s) for s in datasource.groupby_column_names]),
-        'granularity': TextField('Time Granularity', default="one day"),
-        'since': TextField('Since', default="one day ago"),
+            choices=[(s, s) for s in datasource.groupby_column_names],
+            description="One or many fields to group by"),
+        'granularity': TextField(
+            'Time Granularity', default="one day",
+            description=(
+                "The time granularity for the visualization. Note that you "
+                "can type and use simple natural language as in '10 seconds', "
+                "'1 day' or '56 weeks'")),
+        'since': TextField(
+            'Since', default="one day ago", description=(
+                "Timestamp from filter. This supports free form typing and "
+                "natural language as in '1 day ago', '28 days' or '3 years'")),
         'until': TextField('Until', default="now"),
         'row_limit':
             SelectField(
                 'Row limit', choices=[(s, s) for s in row_limits]),
         'limit':
             SelectField(
-                'Series limit', choices=[(s, s) for s in series_limits]),
+                'Series limit', choices=[(s, s) for s in series_limits],
+                description=(
+                    "Limits the number of time series that get displayed")),
         'rolling_type': SelectField(
             'Rolling',
-            choices=[(s, s) for s in ['mean', 'sum', 'std']]),
-        'rolling_periods': TextField('Periods',),
+            choices=[(s, s) for s in ['mean', 'sum', 'std']],
+            description=(
+                "Defines a rolling window function to apply")),
+        'rolling_periods': TextField('Periods', description=(
+            "Defines the size of the rolling window function, "
+            "relative to the 'granularity' field")),
         'series': SelectField('Series', choices=group_by_choices),
         'entity': SelectField('Entity', choices=group_by_choices),
         'x': SelectField('X Axis', choices=datasource.metrics_combo),
diff --git a/panoramix/templates/panoramix/datasource.html b/panoramix/templates/panoramix/datasource.html
index 2104ce3dcb..a7a68410c6 100644
--- a/panoramix/templates/panoramix/datasource.html
+++ b/panoramix/templates/panoramix/datasource.html
@@ -43,8 +43,16 @@ form input.form-control {
         {% if not fieldname.__iter__ %}
             <div>
                 {% set field = form.get_field(fieldname)%}
-                {{ field.label }}: 
+                <div>
+                  {{ field.label }}
+                  {% if field.description %}
+                    <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
+                      title="{{ field.description }}"></i>
+                  {% endif %}: 
+                </div>
+                <div>
                 {{ field(class_=form.field_css_classes(field.name)) }}
+                </div>
             </div>
         {% else %}
           <div class="row">
@@ -52,7 +60,11 @@ form input.form-control {
               {% for name in fieldname %}
                   <div class="col-xs-{{ (12 / fieldname|length) | int }}">
                     {% set field = form.get_field(name)%}
-                    {{ field.label }}: 
+                    {{ field.label }}
+                    {% if field.description %}
+                      <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="right"
+                        title="{{ field.description }}"></i>
+                    {% endif %}: 
                     {{ field(class_=form.field_css_classes(field.name)) }}
                   </div>
               {% endfor %}