Merge pull request #84 from latin-language-toolkit/morph_improvements

Dependencies of morph attributes - Fixes to state, token and dependencyTree

app/index.html

@@ -37,6 +37,7 @@
   <script src="./js/arethusa.core/directives/arethusa_navbar.js"></script>
   <script src="./js/arethusa.core/directives/resizable.js"></script>
   <script src="./js/arethusa.core/directives/sidepanel_folder.js"></script>
+  <script src="./js/arethusa.core/directives/value_watch.js"></script>
   <script src="./js/arethusa.core/routes/main.constant.js"></script>
   <script src="./js/arethusa.core/conf_url.factory.js"></script>
   <script src="./js/arethusa.core/notifier_ctrl.controller.js"></script>

app/js/arethusa.core/directives/token.js

@@ -73,6 +73,12 @@ angular.module('arethusa.core').directive('token', function(state) {
           cleanStyle();
         }
       });
+
+      scope.$watch('token.style', function(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          element.css(scope.token.style);
+        }
+      });
     },
     templateUrl: 'templates/token.html'
   };

app/js/arethusa.core/directives/value_watch.js

@@ -0,0 +1,12 @@
+"use strict";
+
+angular.module('arethusa.core').directive('valueWatch', function() {
+  return {
+    restrict: 'A',
+    scope: {
+      target: '=',
+      property: '@'
+    },
+    template: '<span>{{ target[property] }}</span>'
+  };
+});

app/js/arethusa.core/state.service.js

@@ -3,11 +3,15 @@
 angular.module('arethusa.core').service('state', function(configurator, navigator, $rootScope) {
   var self = this;
 
-  this.tokens = {};
-
   var conf = configurator.configurationFor('main');
   var tokenRetrievers = configurator.getRetrievers(conf.retrievers);
 
+  // We hold tokens locally during retrieval phase.
+  // Once we are done, they will be exposed through
+  // this.replaceState, which also triggers
+  // the stateLoaded event.
+  var tokens = {};
+
   // Loading a state
 
   var saveTokens = function(container, tokens) {
@@ -35,7 +39,7 @@ angular.module('arethusa.core').service('state', function(configurator, navigato
         declareLoaded(retriever);
       });
     });
-    this.tokens = container;
+    tokens = container;
   };
 
   this.checkLoadStatus = function() {
@@ -45,7 +49,7 @@ angular.module('arethusa.core').service('state', function(configurator, navigato
     });
 
     if (loaded) {
-      this.broadcastReload();
+      this.replaceState(tokens);
     }
   };
 

app/js/arethusa.dep_tree/directives/dependency_tree.js

@@ -53,11 +53,15 @@ angular.module('arethusa.depTree').directive('dependencyTree', function($compile
       }
 
       function labelPlaceholder(token) {
-        var label = token.relation.label;
+        var label = generateLabel(token);
         var id = token.id;
         return '<div id="' + labelId(id) + '" class="tree-label">' + label + '</div>';
       }
 
+      function generateLabel(token) {
+        return (token.relation || {}).label;
+      }
+
       function tokenHasCustomStyling(token) {
         var t = scope.styles[token.id] || {};
         return t.token;
@@ -108,6 +112,13 @@ angular.module('arethusa.depTree').directive('dependencyTree', function($compile
         }
       }
 
+      function compiledEdgeLabel(token) {
+        var template = '<span value-watch target="obj" property="label"></span>';
+        var childScope = scope.$new();
+        childScope.obj = token.relation;
+        return $compile(template)(childScope)[0];
+      }
+
       function compiledToken(token) {
         var childScope = scope.$new();
         childScope.token = token;
@@ -224,12 +235,7 @@ angular.module('arethusa.depTree').directive('dependencyTree', function($compile
 
       var renderer = new dagreD3.Renderer();
 
-      function render() {
-        vis = svg.select('g');
-        renderer.layout(layout).run(g, vis);
-
-        // Customize the graph so that it holds our directives
-
+      function insertTokenDirectives() {
         nodes().append(function() {
           // This is the element we append to and we created as a placeholder
           // We clear out its text content so that we can display the content
@@ -238,6 +244,26 @@ angular.module('arethusa.depTree').directive('dependencyTree', function($compile
           this.textContent = "";
           return compiledToken(scope.tokens[this.id.slice(3)]);
         });
+      }
+
+      function insertEdgeDirectives() {
+        angular.forEach(scope.tokens, function(token, id) {
+          label(id).append(function() {
+            this.textContent = "";
+            return compiledEdgeLabel(token);
+          });
+        });
+
+      }
+
+      function render() {
+        vis = svg.select('g');
+        renderer.layout(layout).run(g, vis);
+
+        // Customize the graph so that it holds our directives
+
+        insertTokenDirectives();
+        insertEdgeDirectives();
 
         // Not very elegant, but we don't want marker-end arrowheads right now
         // We also place an token edge path (tep) id on these elements, so that
@@ -259,15 +285,6 @@ angular.module('arethusa.depTree').directive('dependencyTree', function($compile
             render();
           }
         });
-        childScope.relation =  token.relation;
-        childScope.$watch('relation.label', function(newVal, oldVal) {
-          // Very important to do here, otherwise the tree will
-          // be render a little often on startup...
-          if (newVal !== oldVal) {
-            updateEdge(token);
-            render();
-          }
-        });
       });
 
       scope.$watch('tokens', function(newVal, oldVal) {

app/js/arethusa.morph/directives/morph_form_create.js

@@ -10,11 +10,52 @@ angular.module('arethusa.morph').directive('morphFormCreate', function() {
       var a = arethusaUtil.inject({}, scope.plugin.postagSchema, function(memo, el) {
         memo[el] = undefined;
       });
+
+      var schema = scope.plugin.postagSchema;
+
       scope.forms = scope.analysis.forms;
       scope.form = {
         postag: scope.plugin.emptyPostag(),
         attributes: a
       };
+
+      function inArray(arr, val) {
+        return arr.indexOf(val) !== -1;
+      }
+
+      function dependencyMet(dependencies) {
+        if (! dependencies) {
+          return true;
+        }
+
+        var ok = true;
+        for (var k in dependencies) {
+          var depArray = dependencies[k];
+          if (! inArray(depArray, scope.form.attributes[k])) {
+            ok = false;
+            break;
+          }
+        }
+        return ok;
+      }
+
+      function getVisibleAttributes() {
+        return arethusaUtil.inject([], schema, function(memo, attr) {
+          var ifDependencies = (scope.plugin.dependenciesOf(attr) || {}).if;
+          if (dependencyMet(ifDependencies)) {
+            memo.push(attr);
+          }
+        });
+      }
+
+      function setVisibleAttributes() {
+        scope.visibleAttributes = getVisibleAttributes();
+      }
+
+      scope.$watch('form.attributes', function(newVal, oldVal) {
+        setVisibleAttributes();
+      }, true);
+
       // save button to create the form formally
       // watch click events in upper scopes which
       // want to edit a form - replace the form in this scope

app/js/arethusa.morph/morph.service.js

@@ -1,6 +1,7 @@
 "use strict";
 
 angular.module('arethusa.morph').service('morph', function(state, configurator) {
+  var self = this;
   this.conf = configurator.configurationFor('morph');
   this.attributes = this.conf.attributes;
   this.template = this.conf.template;
@@ -197,6 +198,10 @@ angular.module('arethusa.morph').service('morph', function(state, configurator)
     return state.tokens[id].morphology == form;
   };
 
+  this.dependenciesOf = function(attr) {
+    return self.selectAttribute(attr).dependencies;
+  };
+
   this.init = function() {
     this.analyses = this.loadInitalAnalyses(this);
   };

app/static/configs/morph/attributes.json

@@ -122,6 +122,11 @@
           "short" : "3rd",
           "postag" : "3"
         }
+      },
+      "dependencies" : {
+        "if" : {
+          "pos" : [ "verb" ]
+        }
       }
     },
     "num" : {

app/templates/morph_form_create.html

@@ -1,5 +1,4 @@
-{{ form.postag }}
-<div class="row" ng-repeat="(attr, val) in form.attributes">
+<div class="row" ng-repeat="attr in visibleAttributes">
   <div class="small-3 columns">
     <label class="right">{{ plugin.longAttributeName(attr) }}</label>
   </div>
@@ -9,7 +8,7 @@
       ng-model="form.attributes[attr]"
       ng-init="opt.short"
       ng-options="name as opt.long for (name, opt) in plugin.attributeValues(attr)"
-      synchronize-postag="{form: 'form', attr: 'attr', val: 'val'}">
+      synchronize-postag="{form: 'form', attr: 'attr', val: 'form.attributes[attr]'}">
     </select>
   </div>
 </div>