From bd3418b13ef6529d72adee652f1a2f10ff409b1b Mon Sep 17 00:00:00 2001
From: Paul Walker <paul@nucivic.com>
Date: Tue, 2 Feb 2016 15:26:19 +0000
Subject: [PATCH 1/2] Add spectrum deps and logging

---
 examples/app.js         | 3 ++-
 examples/index.html     | 3 +++
 examples/view.js        | 1 +
 src/ChartOptionsView.js | 8 +++++---
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/examples/app.js b/examples/app.js
index 5141f28..5d6c218 100644
--- a/examples/app.js
+++ b/examples/app.js
@@ -2,7 +2,8 @@
   'use strict';
 
   $(document).on('ready', function(){
-  	var state = new recline.Model.ObjectState();
+    console.log('1..');
+    var state = new recline.Model.ObjectState();
     var sharedObject = {state: state};
 
   	var msv = new MultiStageView({
diff --git a/examples/index.html b/examples/index.html
index 8f840f6..0b7e620 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -12,11 +12,14 @@
   <link rel="stylesheet" href="../vendor/chosen-bootstrap/chosen.bootstrap.css">
   <link rel="stylesheet" href="../css/slickgrid.css">
   <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../css/ve_chart.css">
+  <link rel="stylesheet" href="../vendor/spectrum/spectrum.css">
   <link rel="stylesheet" href="../vendor/nvd3/build/nv.d3.css">
 
   <!-- 3rd party JS libraries -->
   <script src="../vendor/slickgrid/lib/jquery-1.7.min.js"></script>
   <script src="../vendor/chosen/chosen.jquery.min.js"></script>
+  <script src="../vendor/spectrum/spectrum.js"></script>
   <script src="../vendor/csv.js/csv.js"></script>
   <script src="../vendor/recline.backend.gdocs/backend.gdocs.js"></script>
   <script src="../vendor/lodash/dist/lodash.js"></script>
diff --git a/examples/view.js b/examples/view.js
index 1aeb60c..5ac16af 100644
--- a/examples/view.js
+++ b/examples/view.js
@@ -15,6 +15,7 @@
     var model = new recline.Model.Dataset(state.get('model'));
     model.queryState.attributes.size = 10000000;
     model.fetch().done(function(){
+      console.log('fetch view', state.get('graphType'));
       window.chart = new recline.View.nvd3[state.get('graphType')]({
           model: model,
           state: state,
diff --git a/src/ChartOptionsView.js b/src/ChartOptionsView.js
index 92f36b2..dc844e2 100644
--- a/src/ChartOptionsView.js
+++ b/src/ChartOptionsView.js
@@ -53,25 +53,27 @@
       };
     },
     render: function(){
+      console.log("render options view");
       var self = this;
       var graphType = self.state.get('graphType');
 
       self.state.set('group', true, {silent:true});
       self.$el.html(Mustache.render(self.template, self.state.toJSON()));
-
+      
+      console.log("graphType", graphType);
       // Common controls for all the charts.
       self.baseControls = new recline.View.nvd3.BaseControl({
         model: self.state.get('model'),
         state: self.state,
         parent: self
       });
-
+      
       // Controls available only for this graphType.
       self.extendedControls = new recline.View.nvd3[graphType + 'Controls']({
         model: self.state.get('model'),
         state: self.state
       });
-
+//      console.log('options view', self.baseControls, self.extendedControls);
       // Chart itself.
       self.graph = new recline.View.nvd3[graphType]({
         model: self.state.get('model'),

From 9fa097f1ed23945bcfdfdadbaf87d37ee336dbee Mon Sep 17 00:00:00 2001
From: Paul Walker <paul@nucivic.com>
Date: Tue, 2 Feb 2016 19:10:08 +0000
Subject: [PATCH 2/2] Add explicit calls for the query editor and filter editor
 to view instantiate

---
 src/ChartOptionsView.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/ChartOptionsView.js b/src/ChartOptionsView.js
index dc844e2..7229807 100644
--- a/src/ChartOptionsView.js
+++ b/src/ChartOptionsView.js
@@ -45,6 +45,7 @@
               '</div>',
     initialize: function(options){
       var self = this;
+      console.log('chart option view init');
       self.options = _.defaults(options || {}, self.options);
       self.state = self.options.state;
       self.stepInfo = {
@@ -56,29 +57,31 @@
       console.log("render options view");
       var self = this;
       var graphType = self.state.get('graphType');
-
       self.state.set('group', true, {silent:true});
       self.$el.html(Mustache.render(self.template, self.state.toJSON()));
       
-      console.log("graphType", graphType);
       // Common controls for all the charts.
       self.baseControls = new recline.View.nvd3.BaseControl({
         model: self.state.get('model'),
         state: self.state,
-        parent: self
+        parent: self,
       });
-      
+            
       // Controls available only for this graphType.
       self.extendedControls = new recline.View.nvd3[graphType + 'Controls']({
         model: self.state.get('model'),
-        state: self.state
+        state: self.state,
+        renderQueryEditor : true,
+        renderFilterEditor : true,
+        parent : self
       });
-//      console.log('options view', self.baseControls, self.extendedControls);
+      
       // Chart itself.
       self.graph = new recline.View.nvd3[graphType]({
         model: self.state.get('model'),
         state: self.state
       });
+      
       // Grid
       self.grid = new recline.View.SlickGrid({
         model: self.state.get('model'),