superset2/panoramix/templates/panoramix/explore.html

{% extends "panoramix/base.html" %}
{% 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">
  <form id="query" method="GET" style="display: none;">
    <div class="header">
        <a class="btn btn-primary druidify" 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 %}
          <a data-toggle="modal" data-target="#sourceinfo_modal">
            <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="{{ datasource.description }}"></i>
          </a>
          {% endif %}
            <a class="" href="/{{ datasource.baselink }}/edit/{{ datasource.id }}" data-toggle="tooltip" title="Edit datasource">
              <i class="fa fa-edit"></i>
            </a>
        </span>
        <span>{{ form.get_field("viz_type")(class_="select2") }}</span>
        <div class="btn-group pull-right" role="group">
          <span class="btn btn-default" id="standalone" title="Standalone version, use to embed anywhere" data-toggle="tooltip">
            <i class="fa fa-code"></i>
          </span>
          <span class="btn btn-default " id="json" title="Export to .json" data-toggle="tooltip">
            <i class="fa fa-file-code-o"></i>
            .json
          </span>
          <span class="btn btn-default " id="csv" title="Export to .csv format" data-toggle="tooltip">
            <i class="fa fa-file-text-o"></i>.csv
          </span>
          <span class="btn btn-warning notbtn" id="timer">0 sec</span>
          <span class="btn btn-info disabled query"
            data-toggle="modal" data-target="#query_modal">query</span>
        </div>
        <hr/>
    </div>
    <div class="row">
      <div id="form_container" class="col-md-3">
        {% for fieldset in form.fieldsets %}
            <fieldset class="fs-style">
              {% if fieldset.label %}
                <legend class="legend-style">
                  <span class="legend_label">{{ fieldset.label }}</span>
                  {% if fieldset.description %}
                    <i    class="fa fa-info-circle" data-toggle="tooltip"
                          data-placement="bottom"
                          title="{{ fieldset.description }}"></i>
                  {% endif %}
                  <span class="collapser"> [-]</span>
                </legend>
              {% endif %}
              <div class="fieldset_content">
              {% for fieldname in fieldset.fields %}
                {% if not fieldname.__iter__ %}
                  {{ panofield(fieldname) }}
                {% else %}
                <div class="row">
                  <div class="form-group">
                    {% for name in fieldname %}
                    <div class="col-xs-{{ (12 / fieldname|length) | int }}">
                      {% if name %}
                        {{ panofield(name) }}
                      {% endif %}
                    </div>
                    {% endfor %}
                  </div>
                </div>
                {% endif %}
              {% endfor %}
              </div>
            </fieldset>
          {% endfor %}
          <fieldset class="fs-style">
            <legend class="legend-style">
              <span class="legend_label">Filters</span>
              <i  class="fa fa-info-circle" data-toggle="tooltip"
                  data-placement="bottom"
                  title="Filters are defined using comma delimited strings as in 'US,FR,Other'"></i>
              <span class="collapser"> [-]</span>
            </legend>
            <div class="fieldset_content">
              <div id="flt0" style="display: none;">
                <span class="">{{ form.flt_col_0(class_="form-control inc") }}</span>
                <div class="row">
                  <span class="col col-sm-4">{{ form.flt_op_0(class_="form-control inc") }}</span>
                  <span class="col col-sm-6">{{ form.flt_eq_0(class_="form-control inc") }}</span>
                  <button type="button" class="btn btn-sm remove" aria-label="Delete filter">
                    <span class="glyphicon glyphicon-minus"  aria-hidden="true"></span>
                  </button>
                </div>
              </div>
              <div id="filters"></div>
              <button type="button" id="plus" class="btn btn-sm" aria-label="Add a filter">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
              </button>
            </div>
          </fieldset>
          <button type="button" class="btn btn-primary druidify">
            <i class="fa fa-bolt"></i>
            Slice!
          </button>
          {% if viz.form_data.slice_id %}
            <button type="button" class="btn btn-default" id="btn_overwrite">
              <i class="fa fa-save"></i>
              Overwrite
            </button>
          {% endif %}
          <button type="button" class="btn btn-default" id="btn_save">
            <i class="fa fa-plus-circle"></i>
            Save as
          </button>
          <img src="{{ url_for("static", filename="img/tux_panoramix.png") }}" width=250 alt="Tux">
          {{ form.slice_id() }}
          {{ form.slice_name() }}
          {{ form.collapsed_fieldsets() }}
          <input type="hidden" name="action" id="action" value="">
          <input type="hidden" name="datasource_name" value="{{ datasource.name }}">
          <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" }}">
        <br>
      </div>

      <div class="col-md-9">
        {% block messages %}{% endblock %}
        {% include 'appbuilder/flash.html' %}
        <div
          id="{{ viz.token }}"
          class="viz slice {{ viz.viz_type }}"
          data-slice="{{ viz.json_data }}"
          style="height: 700px;">
          <img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
          <div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="query_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Query</h4>
          </div>
          <div class="modal-body">
            <pre id="query_container">
              {% if viz.query %}
              {% else %}
                <img width="250" src="{{ url_for('static', filename="img/penguins.png") }}" alt="Under construction">
              {% endif %}
            </pre>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="sourceinfo_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Query</h4>
          </div>
          <div class="modal-body">
            <pre id="query_container">{{ datasource.description }}</pre>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
{% endblock %}

{% block tail_js %}
{{ super() }}
<script>
  $(document).ready(px.initExploreView);
  $(document).ready(function() {
    var data = $('.slice').data('slice');
    var slice = px.Slice(data);
    $('.slice').data('slice', slice);
    slice.render();

    function get_collapsed_fieldsets(){
        collapsed_fieldsets = $("#collapsed_fieldsets").val();
        if (collapsed_fieldsets != undefined && collapsed_fieldsets != "")
          collapsed_fieldsets = collapsed_fieldsets.split('||');
        else
          collapsed_fieldsets = [];
        return collapsed_fieldsets;
    }

    function toggle_fieldset(legend, animation) {
        var parent = legend.parent();
        fieldset = parent.find(".legend_label").text();
        collapsed_fieldsets = get_collapsed_fieldsets();

        if (!parent.hasClass("collapsed")){
          if (animation)
            parent.find(".fieldset_content").slideUp();
          else
            parent.find(".fieldset_content").hide();

          parent.addClass("collapsed");
          parent.find("span.collapser").text("[+]");
          var index = collapsed_fieldsets.indexOf(fieldset);
          if (index === -1 && fieldset !== "" && fieldset !== undefined) {
            collapsed_fieldsets.push(fieldset);
          }
        } else {
          if (animation)
            parent.find(".fieldset_content").slideDown();
          else
            parent.find(".fieldset_content").show();
          parent.removeClass("collapsed");
          parent.find("span.collapser").text("[-]");

          // removing from array, js is overcomplicated
          var index = collapsed_fieldsets.indexOf(fieldset);
          if (index !== -1) {
            collapsed_fieldsets.splice(index, 1);
          }
        }
        $("#collapsed_fieldsets").val(collapsed_fieldsets.join("||"));
    }

    $('legend').click(function () {
      toggle_fieldset($(this), true);
    });
    $('#json').click(function () {
      window.location = '{{ viz.json_endpoint | safe }}';
    });
    $('#csv').click(function () {
      window.location = '{{ viz.csv_endpoint | safe }}';
    });
    $('#standalone').click(function () {
      window.location = '{{ viz.standalone_endpoint | safe }}';
    });
    $("#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);
    }
  });
</script>
{% endblock %}