Merge pull request #139 from mistercrunch/chris/npm-ify2

NPMification & Reactification

.gitignore

@@ -14,3 +14,9 @@ dist
 panoramix.egg-info/
 app.db
 *.bak
+
+# Node.js, webpack artifacts
+*.entry.js
+*.js.map
+node_modules
+npm-debug.log

CONTRIBUTING.md

@@ -28,10 +28,6 @@ open to whoever wants to implement it.
 Look through the GitHub issues for features. Anything tagged with
 "feature" is open to whoever wants to implement it.
 
-We've created the operators, hooks, macros and executors we needed, but we 
-made sure that this part of Panoramix is extensible. New operators,
-hooks and operators are very welcomed!
-
 ### Documentation
 
 Panoramix could always use better documentation,
@@ -55,7 +51,7 @@ If you are proposing a feature:
 
 [API Documentation](http://pythonhosted.com/panoramix)
 
-## Setting up a development environment
+## Setting up a Python development environment
 
     # fork the repo on github and then clone it
     # alternatively you may want to clone the main repo but that won't work
@@ -84,7 +80,61 @@ If you are proposing a feature:
     # start a dev web server
     panoramix runserver -d
 
-For every development session you may have to 
+
+## Setting up the node / npm javascript environment
+
+`panoramix/assets` contains all npm-managed, front end assets.
+Flask-Appbuilder itself comes bundled with jQuery and bootstrap.
+While these may be phased out over time, these packages are currently not
+managed with npm.
+
+
+### Using npm to generate bundled files
+
+#### npm
+First, npm must be available in your environment. If it is not you can run the following commands
+(taken from [this source](https://gist.github.com/DanHerbert/9520689))
+```
+brew install node --without-npm
+echo prefix=~/.npm-packages >> ~/.npmrc
+curl -L https://www.npmjs.com/install.sh | sh
+```
+
+The final step is to add
+`~/.node/bin` to your `PATH` so commands you install globally are usable.
+Add something like this to your `.bashrc` file.
+```
+export PATH="$HOME/.node/bin:$PATH"
+```
+
+#### npm packages
+To install third party libraries defined in `package.json`, run the
+following within this directory which will install them in a
+new `node_modules/` folder within `assets/`.
+
+```
+npm install
+```
+
+To parse and generate bundled files for panoramix, run either of the
+following commands. The `dev` flag will keep the npm script running and
+re-run it upon any changes within the assets directory.
+
+```
+# Compiles the production / optimized js & css
+npm run prod
+
+# Start a web server that manages and updates your assets as you modify them
+npm run dev
+```
+
+For every development session you will have to start a flask dev server
+as well as an npm watcher
+
+```
+panoramix runserver -d -p 8081
+npm run dev
+```
 
 ## Testing
 

README.md

@@ -174,3 +174,10 @@ getting the foundation for free
 * The Flask ecosystem - Simply amazing. So much Plug, easy play.
 * NVD3 - One of the best charting library out there
 * Much more, check out the requirements.txt file!
+
+
+Contributing
+------------
+
+Interested in contributing? Casual hacking? Check out the `CONTRIBUTING.md`
+file in the repository to get started!

panoramix/__init__.py

@@ -1,7 +1,8 @@
 import logging
 import os
-from flask import Flask
+from flask import Flask, redirect
 from flask.ext.appbuilder import SQLA, AppBuilder, IndexView
+from flask.ext.appbuilder.baseviews import expose
 from flask.ext.migrate import Migrate
 from panoramix import config
 
@@ -20,10 +21,13 @@
 
 
 class MyIndexView(IndexView):
-    index_template = 'index.html'
+    @expose('/')
+    def index(self):
+        return redirect('/panoramix/featured')
 
 appbuilder = AppBuilder(
-    app, db.session, base_template='panoramix/base.html',
+    app, db.session,
+    base_template='panoramix/base.html',
     indexview=MyIndexView,
     security_manager_class=app.config.get("CUSTOM_SECURITY_MANAGER"))
 

panoramix/assets/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets" : ["es2015", "react"]
+}

panoramix/assets/javascripts/dashboard.js

@@ -0,0 +1,155 @@
+var $ = window.$ = require('jquery');
+var jQuery = window.jQuery = $;
+var px = require('./modules/panoramix.js');
+var d3 = require('d3');
+require('bootstrap');
+
+var ace = require('brace');
+require('brace/mode/css');
+require('brace/theme/crimson_editor');
+
+require('select2');
+require('../node_modules/gridster/dist/jquery.gridster.min.js');
+require('../node_modules/gridster/dist/jquery.gridster.min.js');
+
+var dashboard;
+
+var Dashboard = function(id){
+  var dash = {
+    slices: [],
+    filters: {},
+    id: id,
+    addFilter: function(slice_id, filters) {
+      this.filters[slice_id] = filters;
+      this.refreshExcept(slice_id);
+    },
+    readFilters: function() {
+      // Returns a list of human readable active filters
+      return JSON.stringify(this.filters, null, 4);
+    },
+    refreshExcept: function(slice_id) {
+      this.slices.forEach(function(slice){
+        if(slice.data.slice_id != slice_id){
+          slice.render();
+        }
+      });
+    },
+    clearFilter: function(slice_id) {
+      delete this.filters[slice_id];
+      this.refreshExcept(slice_id);
+    },
+    getSlice: function(slice_id) {
+      for(var i=0; i<this.slices.length; i++){
+        if (this.slices[i].data.slice_id == slice_id)
+          return this.slices[i];
+      }
+    }
+  }
+  $('.dashboard li.widget').each(function() {
+    var data = $(this).data('slice');
+    var slice = px.Slice(data, dash);
+    $(this).find('a.refresh').click(function(){
+      slice.render();
+    });
+    dash.slices.push(slice);
+    slice.render();
+  });
+  dashboard = dash;
+  return dash;
+}
+
+function initDashboardView() {
+  var gridster = $(".gridster ul").gridster({
+    widget_margins: [5, 5],
+    widget_base_dimensions: [100, 100],
+    draggable: {
+      handle: '.drag',
+    },
+    resize: {
+      enabled: true,
+      stop: function(e, ui, element) {
+        var slice_data = $(element).data('slice');
+        dashboard.getSlice(slice_data.slice_id).resize();
+      }
+    },
+    serialize_params: function(_w, wgd) {
+      return {
+        slice_id: $(_w).attr('slice_id'),
+        col: wgd.col,
+        row: wgd.row,
+        size_x: wgd.size_x,
+        size_y: wgd.size_y
+      };
+    },
+  }).data('gridster');
+  $("div.gridster").css('visibility', 'visible');
+  $("#savedash").click(function() {
+    var expanded_slices = {};
+    $.each($(".slice_info"), function(i, d){
+      var widget = $(this).parents('.widget');
+      var slice_description = widget.find('.slice_description');
+      if(slice_description.is(":visible"))
+        expanded_slices[$(d).attr('slice_id')] = true;
+    });
+    var data = {
+        positions: gridster.serialize(),
+        css: editor.getValue(),
+        expanded_slices: expanded_slices,
+    };
+    $.ajax({
+      type: "POST",
+      url: '/panoramix/save_dash/' + dashboard.id + '/',
+      data: {'data': JSON.stringify(data)},
+      success: function() {alert("Saved!")},
+      error: function() {alert("Error :(")},
+    });
+  });
+
+  var editor = ace.edit("dash_css");
+  editor.$blockScrolling = Infinity
+
+  editor.setTheme("ace/theme/crimson_editor");
+  editor.setOptions({
+      minLines: 16,
+      maxLines: Infinity,
+  });
+  editor.getSession().setMode("ace/mode/css");
+
+  $(".select2").select2({dropdownAutoWidth : true});
+  $("#css_template").on("change", function() {
+    var css = $(this).find('option:selected').data('css');
+    editor.setValue(css);
+    $('#dash_css').val(css);
+    $("#user_style").html(css);
+  });
+  $('#filters').click( function(){
+    alert(dashboard.readFilters());
+  });
+  $("a.closeslice").click(function() {
+    var li = $(this).parents("li");
+    gridster.remove_widget(li);
+  });
+  $(".slice_info").click(function(){
+    var widget = $(this).parents('.widget');
+    var slice_description = widget.find('.slice_description');
+    slice_description.slideToggle(500, function(){
+      widget.find('.refresh').click();
+    });
+  });
+  $("table.slice_header").mouseover(function() {
+    $(this).find("td.icons nobr").show();
+  });
+  $("table.slice_header").mouseout(function() {
+    $(this).find("td.icons nobr").hide();
+  });
+  editor.on("change", function(){
+    var css = editor.getValue();
+    $('#dash_css').val(css);
+    $("#user_style").html(css);
+  });
+}
+
+$(document).ready(function() {
+  initDashboardView();
+  var dashboard = Dashboard($('#dashboard_id').val());
+});