Adding standalone mode

TODO.md

@@ -1,6 +1,8 @@
 # TODO
 List of TODO items for Panoramix
 
+* fix directed
+
 ## Improvments
 * dashboard controller + filters
 * Color hash in JS

panoramix/static/panoramix.css

@@ -136,7 +136,7 @@ legend {
 .datasource .tooltip-inner {
   max-width: 350px;
 }
-.datasource img.loading {
+img.loading {
   width: 30px;
 }
 

panoramix/static/panoramix.js

@@ -1,6 +1,7 @@
 var px = (function() {
 
   var visualizations = [];
+  var dashboard = undefined;
 
   var Slice = function(data, dashboard){
     var timer;
@@ -73,10 +74,14 @@ var px = (function() {
         container.hide();
         container.html('');
         timer = setInterval(stopwatch, 10);
-        viz.render(this);
+        viz.render();
       },
       resize: function() {
-        viz.resize(this);
+        token.find("img.loading").show();
+        container.hide();
+        container.html('');
+        viz.render();
+        viz.resize();
       },
       addFilter: function(col, vals) {
         if(dashboard !== undefined)
@@ -92,10 +97,11 @@ var px = (function() {
     return slice;
   }
 
-  var Dashboard = function(){
+  var Dashboard = function(id){
     var dash = {
       slices: [],
       filters: {},
+      id: id,
       addFilter: function(slice_id, field, values) {
         this.filters[slice_id] = [field, values];
         this.refreshExcept(slice_id);
@@ -111,6 +117,13 @@ var px = (function() {
         delete this.filters[slice_id];
         this.refreshExcept(slice_id);
       },
+      getSlice: function(slice_id) {
+        for(var i=0; i<this.slices.length; i++){
+          console.log([this.slices[i].data.slice_id, slice_id]);
+          if (this.slices[i].data.slice_id == slice_id)
+            return this.slices[i];
+        }
+      }
     }
     $('.dashboard li.widget').each(function() {
       var data = $(this).data('slice');
@@ -121,6 +134,7 @@ var px = (function() {
       dash.slices.push(slice);
       slice.render();
     });
+    dashboard = dash;
     return dash;
   }
 
@@ -247,7 +261,7 @@ var px = (function() {
     });
   }
 
-function initDashboardView(dashboard_id) {
+  function initDashboardView() {
     var gridster = $(".gridster ul").gridster({
       widget_margins: [5, 5],
       widget_base_dimensions: [100, 100],
@@ -257,8 +271,8 @@ function initDashboardView(dashboard_id) {
       resize: {
         enabled: true,
         stop: function(e, ui, element) {
-        var slice = $(element).data('slice');
+          var slice_data = $(element).data('slice');
-        slice.resize();
+          dashboard.getSlice(slice_data.slice_id).resize();
         }
       },
       serialize_params: function(_w, wgd) {
@@ -271,6 +285,7 @@ function initDashboardView(dashboard_id) {
         };
       },
     }).data('gridster');
+    console.log(gridster);
     $("div.gridster").css('visibility', 'visible');
     $("#savedash").click(function() {
       var data = {
@@ -279,7 +294,7 @@ function initDashboardView(dashboard_id) {
       };
       $.ajax({
         type: "POST",
-      url: '/panoramix/save_dash/' + dashboard_id + '/',
+        url: '/panoramix/save_dash/' + dashboard.id + '/',
         data: {'data': JSON.stringify(data)},
         success: function() {alert("Saved!")},
         error: function() {alert("Error :(")},
@@ -310,8 +325,6 @@ function initDashboardView(dashboard_id) {
     $("div.chart").each(function() {
       $(this).css('height', '95%');
     });
-
-
   }
 
   // Export public functions
@@ -323,4 +336,3 @@ function initDashboardView(dashboard_id) {
     initDashboardView: initDashboardView,
   }
 })();
-

panoramix/static/widgets/viz_directed_force.css

@@ -3,9 +3,6 @@
   stroke: #000;
   stroke-width: 1.5px;
 }
-.directed_force #chart {
-    height: 100%;
-}
 
 .directed_force circle {
   fill: #ccc;

panoramix/static/widgets/viz_directed_force.js

@@ -3,11 +3,10 @@ Modified from http://bl.ocks.org/d3noob/5141278
 */
 
 function viz_directed_force(slice) {
-  var div = d3.select(slice.selector);
   var width = slice.container.width();
   var height = slice.container.height() - 25;
-  var radius = Math.min(width, height) / 2;
   var link_length = slice.data.form_data['link_length'];
+  var div = d3.select(slice.selector);
   if (link_length === undefined){
     link_length = 200;
   }

panoramix/templates/panoramix/dashboard.html

@@ -122,8 +122,8 @@ body {
     <script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
     <script>
       $(document).ready(function() {
-        px.initDashboardView({{ dashboard.id }})
+        px.initDashboardView();
-        var dashboard = px.Dashboard();
+        var dashboard = px.Dashboard({{ dashboard.id }});
       });
     </script>
 {% endblock %}

panoramix/templates/panoramix/explore.html

@@ -36,13 +36,16 @@
         <span class="btn btn-info pull-right disabled query"
           data-toggle="modal" data-target="#query_modal">query</span>
         <span class="btn btn-warning pull-right notbtn" id="timer">0 sec</span>
-        <div class="btn-group pull-right" role="group">
+        <span class="btn btn-default pull-right" id="csv" title="Export to .csv format" data-toggle="tooltip">
-          <span class="btn btn-default disabled">
+          <i class="fa fa-file-text-o"></i>.csv
-            <i class="fa fa-file-text"></i>
+        </span>
+        <span class="btn btn-default pull-right" id="json" title="Export to .json" data-toggle="tooltip">
+          <i class="fa fa-file-code-o"></i>
+          .json
+        </span>
+        <span class="btn btn-default pull-right" 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="csv">.csv</span>
-          <span class="btn btn-default" id="json">.json</span>
-        </div>
         <hr/>
     </div>
     <div class="row">
@@ -133,8 +136,7 @@
       </div>
 
       <div class="col-md-9">
-            {% block messages %}
+        {% block messages %}{% endblock %}
-            {% endblock %}
         {% include 'appbuilder/flash.html' %}
         <div
           id="{{ viz.token }}"
@@ -142,14 +144,6 @@
           data-slice="{{ viz.json_data }}"
           style="height: 700px;">
           <img src="{{ url_for("static", filename="img/loading.gif") }}" class="loading" alt="loading">
-          {% block viz_html %}
-            {% if viz.error_msg %}
-              <div class="alert alert-danger">{{ viz.error_msg }}</div>
-            {% endif %}
-            {% if viz.warning_msg %}
-              <div class="alert alert-warning">{{ viz.warning_msg }}</div>
-            {% endif %}
-          {% endblock %}
           <div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
         </div>
       </div>
@@ -243,6 +237,9 @@
     $('#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++){

panoramix/templates/panoramix/standalone.html

@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <script src="/static/panoramix.js"></script>
+
+    {% block head_css %}
+      <script src="{{url_for('appbuilder.static',filename='js/jquery-latest.js')}}"></script>
+      <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='panoramix.css') }}">
+    {% endblock %}
+  </head>
+  <body>
+    <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>
+
+    <script>
+      $(document).ready(function() {
+        var data = $('.slice').data('slice');
+        var slice = px.Slice(data);
+        slice.render();
+      });
+    </script>
+    {% block tail %}{% endblock %}
+  </body>
+</html>

panoramix/templates/panoramix/viz.html

@@ -2,7 +2,7 @@
   {{ viz.get_json() }}
 {% else %}
   {% if viz.request.args.get("standalone") == "true" %}
-    {% extends 'panoramix/viz_standalone.html' %}
+    {% extends 'panoramix/standalone.html' %}
   {% else %}
     {% extends 'panoramix/explore.html' %}
   {% endif %}
@@ -10,20 +10,16 @@
 
   {% block head_css %}
       {{super()}}
-      {% if viz.request.args.get("skip_libs") != "true" %}
       {% for css in viz.css_files %}
           <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=css) }}">
       {% endfor %}
-      {% endif %}
   {% endblock %}
 
 
   {% block tail %}
       {{super()}}
-      {% if viz.request.args.get("skip_libs") != "true" %}
       {% for js in viz.js_files %}
           <script src="{{ url_for('static', filename=js) }}"></script>
       {% endfor %}
-      {% endif %}
   {% endblock %}
 {% endif %}

panoramix/templates/panoramix/viz_standalone.html

@@ -1,13 +0,0 @@
-<html>
-  <head>
-    {% if viz.request.args.get("skip_libs") != "true" %}
-      {% block head %}
-        <script src="{{url_for('appbuilder.static',filename='js/jquery-latest.js')}}"></script>
-      {% endblock %}
-    {% endif %}
-    {% block tail %}{% endblock %}
-  </head>
-  <body>
-    {% block viz_html %}{% endblock %}
-  </body>
-</html>

panoramix/viz.py

@@ -222,6 +222,10 @@ class BaseViz(object):
     def csv_endpoint(self):
         return self.get_url(csv="true")
 
+    @property
+    def standalone_endpoint(self):
+        return self.get_url(standalone="true")
+
     @property
     def data(self):
         content = {