Add npm package.json and setup webpack to transpile ES6/JSX and compi…

…le JS files for frontend refactor. See readme.md in assets/ for npm setup instructions and visit the panoramix home page for a React sandbox.

.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

panoramix/__init__.py

@@ -20,10 +20,11 @@
 
 
 class MyIndexView(IndexView):
-    index_template = 'index.html'
+    index_template = 'refactor/index.html'
 
 appbuilder = AppBuilder(
-    app, db.session, base_template='panoramix/base.html',
+    app, db.session,
+    base_template='refactor/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/html/base.html

@@ -0,0 +1,44 @@
+{% extends 'appbuilder/init.html' %}
+{% import 'appbuilder/baselib.html' as baselib %}
+
+{% block head_css %}
+    {{super()}}
+    <link rel="shortcut icon" href="/static/refactor/images/favicon.png" />
+    <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/panoramix.css" />
+
+    <!-- Replace with custom theme css -->
+    <!-- <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/themes/bootswatch.paper.min.css" /> -->
+    <link rel="stylesheet" type="text/css" href="/static/refactor/stylesheets/themes/panoramix-bootstrap-theme.css" />
+{% endblock %}
+
+{% block body %}
+
+    {% include 'appbuilder/general/confirm.html' %}
+    {% include 'appbuilder/general/alert.html' %}
+
+    {% block navbar %}
+        <header class="top" role="header">
+        {% include 'appbuilder/navbar.html' %}
+        </header>
+    {% endblock %}
+
+    {% block uncontained %}{% endblock %}
+
+    <div class="container">
+      <div class="row">
+          {% block messages %}
+            {% include 'appbuilder/flash.html' %}
+          {% endblock %}
+          {% block content %}{% endblock %}
+      </div>
+    </div>
+    <div class="container-fluid">
+        {% block content_fluid %}{% endblock %}
+    </div>
+
+{% endblock %}
+
+{% block tail_js %}
+    <script src="/static/refactor/javascripts/dist/base.entry.js"></script>
+    {{ super() }}
+{% endblock %}

panoramix/assets/html/index.html

@@ -0,0 +1,12 @@
+{% extends "refactor/base.html" %}
+
+{% block content_fluid %}
+  <div id="app">
+    Oops! React.js is not working properly.
+  </div>
+{% endblock %}
+
+{% block tail_js %}
+  <script src="/static/refactor/javascripts/dist/index.entry.js"></script>
+  {{ super() }}
+{% endblock %}

panoramix/assets/javascripts/base.js

@@ -0,0 +1,3 @@
+// Currently requires global app dependencies in one place. Css could go here too.
+window.d3 = require('d3');
+window.px = require('./modules/panoramix.js');

panoramix/assets/javascripts/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Jumbotron } from 'react-bootstrap';
+
+class App extends React.Component {
+  render () {
+    return (
+      <Jumbotron>
+        <h1>Panoramix</h1>
+        <p>Extensible visualization tool for exploring data from any database.</p>
+      </Jumbotron>
+    );
+  }
+}
+
+render(<App />, document.getElementById('app'));