Minor refactoring and poll attention values only when graph is active

glimpse/bower.json

@@ -28,6 +28,7 @@
     "d3": "3.5.16",
     "angular-resource": "1.5",
     "v-accordion": "^1.5.1",
-    "dock-spawn": "https://github.com/Selameab/dock-spawn.git#23e7be1da69aa2095dd51e2cee7854598a2b8a5b"
+    "dock-spawn": "https://github.com/Selameab/dock-spawn.git#23e7be1da69aa2095dd51e2cee7854598a2b8a5b",
+    "highcharts-ng": "^0.0.13"
   }
 }

glimpse/index.html

@@ -231,8 +231,6 @@
 <script type="application/javascript" src="js/directives/add-node.js"></script>
 <script type="application/javascript" src="js/directives/connect.js"></script>
 <script type="application/javascript" src="js/directives/graph.js"></script>
-<script type="application/javascript" src="js/directives/graph2.js"></script>
-<script type="application/javascript" src="js/directives/add-graphseries.js"></script>
 <script src="http://code.highcharts.com/stock/highstock.src.js"></script> 
 <script type="application/javascript" src="libs/highcharts-ng/dist/highcharts-ng.min.js"></script>
 

glimpse/index.js

@@ -27,7 +27,8 @@ if (environment == "test") {
     });
 
     test_atoms.use('/api/v1.1/scheme', function(req, res) {
-       res.send('{\"arousal\": '+Math.random()+', \"sadness\": '+Math.random()+'}');
+       data = {"arousal": Math.random(), "sadness": Math.random()}
+       res.send({"response": JSON.stringify(data)});
     });
 
     test_atoms.listen(5000, function() {

glimpse/js/directives/graph.js

@@ -1,16 +1,14 @@
-angular.module('glimpse').directive('graph', function ($http) {
+angular.module('glimpse').directive('graph', function ($rootScope, $http, AtomsFactory) {
 
-    //Todo: These should be read from config or set through the app
-    var psiVariables = ["arousal", "positive-valence", "negative-valence",
-        "power","voice width"];
     var historyTimeLength = 10; //length of plot line in number of seconds
     var refreshRate = 100;   // rate in ms that values are updated from server
 
     // Set number of plot line points to show data for specified time period
     var numPlotLinePts = Math.round(1000/refreshRate)*historyTimeLength;
 
-    var link = function (scope, element, attributes, $parent, $scope) {
-        scope.chartTypes = [
+    var controller = function($scope, $rootScope) {
+    //var link = function (scope, rootScope, element, attributes, $parent, $scope) {
+        $scope.chartTypes = [
             {"id": "line", "title": "Line"},
             {"id": "spline", "title": "Smooth line"},
             {"id": "area", "title": "Area"},
@@ -21,14 +19,10 @@ angular.module('glimpse').directive('graph', function ($http) {
             {"id": "scatter", "title": "Scatter"}
         ];
 
-        scope.init = function () {
-            scope.chartSeries = [];
+        $scope.init = function () {
+            $scope.chartSeries = [];
 
-            scope.chartConfig = {
-                //Note: Setting the default line type (and I'm guessing other properties
-                //in chartConfig.options) does not work when set in the directive link
-                //function, so setting it in the controller function instead.
-                /*
+            $scope.chartConfig = {
                 options: {
                     chart: {
                         type: 'spline'
@@ -39,8 +33,7 @@ angular.module('glimpse').directive('graph', function ($http) {
                         }
                     }
                 },
-                */
-                series: scope.chartSeries,
+                series: $scope.chartSeries,
                 title: {
                     text: 'OpenPSI Variables'
                 },
@@ -62,34 +55,16 @@ angular.module('glimpse').directive('graph', function ($http) {
 
             window.setInterval(function() {
                 //periodically update data
-                scope.update();
+                $scope.update();
             }, refreshRate);
 
         };
 
-        scope.update = function() {
+        $scope.update = function() {
 
-            //TODO: endpoint URL should use the same server/port as the main application,
-            //with "/api/v1.1/scheme" appended
-            var endpointURL = "http://localhost:5000/api/v1.1/scheme";
+           AtomsFactory.updateAttentionValues(function(){
 
-            var vars = ""
-            for (i in psiVariables) {
-                vars += "\"" + psiVariables[i] + "\"";
-            }
-            //var scm = "(psi-get-number-values-for-vars \"arousal\" \"positive-valence\" \"negative-valence\")";
-            var scm = "(psi-get-number-values-for-vars" + vars + ")";
-            //console.log("scm command: " + scm);
-
-            $http.post(endpointURL, {command: scm}, {headers: {'Content-Type': 'application/json'} }).then(function (response,status) {
-                var responseString = response.data.response;
-                console.log("\nresponseString: " + responseString);
-
-                var results = JSON.parse(responseString);
-                console.log("results: ");
-                for (varname in results) {
-                    console.log("    " + varname + ": " + results[varname])
-                }
+                results = AtomsFactory.attention
 
                 //iterate over each psi variable and feed into chartseries object
                 for (varName in results) {
@@ -102,8 +77,8 @@ angular.module('glimpse').directive('graph', function ($http) {
                     //figure out if data point is already in chartSeries
                     var variableExists = false;
 
-                    for (i in scope.chartSeries) {
-                        chartSeriesObject = scope.chartSeries[i];
+                    for (i in $scope.chartSeries) {
+                        chartSeriesObject = $scope.chartSeries[i];
                         if (chartSeriesObject.name == varName) {
                             //it already exists, update array
                             //remove the first element and add current value to the end
@@ -118,7 +93,7 @@ angular.module('glimpse').directive('graph', function ($http) {
                         console.log("Found new variable: " + varName)
                         // plot the full line at the current value for initiating
                         var values = Array(numPlotLinePts).fill(value);
-                        scope.chartSeries.push({name: varName, data: values,
+                        $scope.chartSeries.push({name: varName, data: values,
                             marker: {enabled: false},
                             connectNulls: true});
                     }
@@ -128,44 +103,19 @@ angular.module('glimpse').directive('graph', function ($http) {
                 console.log(err.message)
             });
 
-            //console.log("scope.chartSeries: " + scope.chartSeries);
-
         }  // update()
 
-        //TODO: This executes as soon as glimpse loads, it should only load when graph is loaded / server is connected...
-        scope.init();
-
-    }; // link function
+        // This is being triggered from main.js when panel comes up.
+        // Until there is better detection in dock-spawn for when panels
+        // Open and close, this is a dirty hack.
+        $rootScope.initGraphView = $scope.init
 
 
-    var controller = function($scope) {
-        // Set the default line type in controller function because it doesn't work
-        // to set it in the directive link function (and I'm guessing the same for
-        // other properties in chartConfig.options).
-        $scope.chartConfig = {
-            options: {
-                chart: {
-                    type: 'spline'
-                },
-                plotOptions: {
-                    series: {
-                        stacking: ''
-                    },
-                    line: {
-                        marker: {
-                            enabled: false
-                        }
-                    }
-                }
-            },
-        };
-    }
+    }; // link function
 
     return {
-        link: link,
         controller: controller,
         restrict: 'E',
-        scope: {atoms: '='},
         templateUrl: 'js/templates/graph.html'
     }
 });

glimpse/js/factories.js

@@ -9,6 +9,9 @@ angular.module('glimpse')
         atomsFactory.server = "";
         atomsFactory.nodeTypes = [];
         atomsFactory.types = [];
+
+            //Todo: These should be read from config or set through the app
+        atomsFactory.psiVariables = ["arousal", "positive-valence", "negative-valence", "power","voice width"];
 
        // Member functions
         atomsFactory.updateAtoms = function (successCB, failureCB) {
@@ -20,13 +23,15 @@ angular.module('glimpse')
                 function (response) {
                     atomsFactory.atoms = response.data.result.atoms;
                     atomsFactory.atomsCount = response.data.result.total;
+                    console.log("[AF] updated atoms...")
                     if (typeof successCB === "function") successCB();
 		     },
                 function (error) {
                     if (typeof failureCB === "function") failureCB();
                 }
             );
         };
+
         atomsFactory.setServer = function (s) {
             atomsFactory.server = s; 
         };
@@ -55,6 +60,7 @@ angular.module('glimpse')
                 method: 'GET',
                 url: atomsFactory.server + 'api/v1.1/types'
             }).then(function (response) {
+                console.log("[AF] updated atom types...")
                 atomsFactory.types = response.data.types;
                 atomsFactory.nodeTypes = response.data.types.filter(function (atom) {
                     return atom.indexOf("Node") > -1;
@@ -108,6 +114,44 @@ angular.module('glimpse')
           );
         };
 
+        atomsFactory.updateAttentionValues = function (successCB, failureCB) {
+           if (atomsFactory.server == "") {
+            //we are not connected.
+            if (typeof failureCB === "function") failureCB({"message": "not connected"});
+            return
+           }
+
+           var vars = ""
+           for (i in atomsFactory.psiVariables) {
+               vars += "\"" + atomsFactory.psiVariables[i] + "\"";
+           }
+           //var scm = "(psi-get-number-values-for-vars \"arousal\" \"positive-valence\" \"negative-valence\")";
+           var scm = "(psi-get-number-values-for-vars" + vars + ")";
+           //console.log("scm command: " + scm);
+
+           $http({
+                method: 'POST',
+                url: atomsFactory.server + "api/v1.1/scheme", //TODO: this is a placeholder and will just work for test data, should fetch POST w. correct scm command.
+                cache: false,
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                data: {command: scm}
+            }).then(
+                function (response) {
+                    var responseString = response.data.response;
+                    var results = JSON.parse(responseString);
+
+                    atomsFactory.attention = results;
+                    console.log("[AF] updated attention...")
+                    if (typeof successCB === "function") successCB();
+                },
+                function (error) {
+                    if (typeof failureCB === "function") failureCB();
+                }
+            );
+        };
+
         return atomsFactory;
     })
   ;

glimpse/js/main.js

@@ -41,6 +41,11 @@ glimpse.controller("mainCtrl", function ($rootScope, $scope, $window, $timeout,
             connectDialog.setPosition((window.innerWidth - connectPanel._cachedWidth) / 2, (window.innerHeight - connectPanel._cachedHeight) / 2);
         } else if (panel == 'graph2' && documentManagerNode.children.indexOf(graphNode) == -1) {
             graphNode = dockManager.dockFill(documentManagerNode, graphPanel);
+
+            // This is defined in graph.js
+            console.log("graph loaded... starting periodic update")
+            $rootScope.initGraphView()
+
         } else if (panel == 'json' && documentManagerNode.children.indexOf(jsonNode) == -1) {
             jsonNode = dockManager.dockFill(documentManagerNode, jsonPanel);
         } else if (panel == 'planar' && documentManagerNode.children.indexOf(planarNode) == -1) {

glimpse/js/templates/graph.html

@@ -1,20 +1,18 @@
 <div>
-
-        <div class="span12">
-
-            <div class="row">Width <input ng-model="chartConfig.size.width"></div>
-            <div class="row">Height <input ng-model="chartConfig.size.height"></div>
-
-            <div class="row">Default Type <select ng-model="chartConfig.options.chart.type" ng-options="t.id as t.title for t in chartTypes"></select></div>
-
-            <div class="row">Min: <input type="number" ng-model="chartConfig.xAxis.currentMin"></div>
-            <div class="row">Max: <input type="number" ng-model="chartConfig.xAxis.currentMax"></div>
-          </div>
-        <div class="row">
-            <highchart id="chart1" config="chartConfig" class="span10"></highchart>
-        </div>
-
-        </div> 
+    <div class="span12">
+        <div class="row">Width <input ng-model="chartConfig.size.width"></div>
+        <div class="row">Height <input ng-model="chartConfig.size.height"></div>
+
+        <div class="row">Default Type <select ng-model="chartConfig.options.chart.type" ng-options="t.id as t.title for t in chartTypes"></select></div>
+
+        <div class="row">Min: <input type="number" ng-model="chartConfig.xAxis.currentMin"></div>
+        <div class="row">Max: <input type="number" ng-model="chartConfig.xAxis.currentMax"></div>
+    </div>
+
+    <div class="row">
+        <highchart id="chart1" config="chartConfig" class="span10"></highchart>
+    </div>
+</div>