Support visualization of new Krill relation format

Change-Id: Ifedddbb87a5b2afb70d485bff4ce28c4d4f9cfa7
diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index d2dd2a3..7519ffe 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -168,6 +168,7 @@
 	"<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
 	" "+
 	"<span xml:id=\"token-WDD17/982/72848-p15838\">"+
+    
 	"<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
 	"</span>"+
 	": "+
@@ -261,48 +262,48 @@
 relSnippet3 =
  	"<span class=\"context-left\"></span>"+
 	"<span class=\"match\">"+
-	"<span xml:id=\"token-WDD17/982/72848-p15836-15839\">"+
-	"<span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15838\">Ein</span>"+
+	"  <span xml:id=\"token-WDD17/982/72848-p15836-15839\">"+
+	"    <span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15838\">Ein</span>"+
 	" "+
-	"<span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
+	"    <span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
 	" "+
-	"<span xml:id=\"token-WDD17/982/72848-p15838\">"+
-	"<span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
-	"</span>"+
+	"    <span xml:id=\"token-WDD17/982/72848-p15838\">"+
+  //     s1464_n2 "ein" -> ":"
+	"      <span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
+	"    </span>"+
 	": "+
-	"<span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
-	"<span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">AL</span>"+
-	"</span>"+
-	"</span>"+
-	"<span xlink:show=\"other\" data-action=\"join\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">"+
+	"    <span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
+	"      <span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">AL</span>"+
+	"    </span>"+
+	"  </span>"+
+	"  <span xlink:show=\"other\" data-action=\"join\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">"+
 	":"+
-	"<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
-	"<span xml:id=\"token-WDD17/982/72848-p15840\">"+
-	"<span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">halt</span>"+
-	"</span>"+
-	"</span>"+
-	"</span>"+
-	// "<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
-	"<span xlink:show=\"other\" data-action=\"join\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">"+
+	"    <span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
+	"      <span xml:id=\"token-WDD17/982/72848-p15840\">"+
+	"        <span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">halt</span>"+
+	"      </span>"+
+	"    </span>"+
+	"  </span>"+
+	"  <span xlink:show=\"other\" data-action=\"join\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">"+
 	" "+
-	"<span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15842\">den</span>"+
+	"    <span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15842\">den</span>"+
 	" "+
-	"<span xml:id=\"token-WDD17/982/72848-p15842\">"+
-	"<span xlink:title=\"lwc/d:OA\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15843\">Ball</span>"+
-	"</span>"+
+	"    <span xml:id=\"token-WDD17/982/72848-p15842\">"+
+	"      <span xlink:title=\"lwc/d:OA\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15843\">Ball</span>"+
+	"    </span>"+
 	" "+
-	"<span xml:id=\"token-WDD17/982/72848-p15843\">"+
-	"<span xlink:title=\"lwc/d:PD\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15840\">flach</span>"+
-	"</span>"+
+	"    <span xml:id=\"token-WDD17/982/72848-p15843\">"+
+	"      <span xlink:title=\"lwc/d:PD\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15840\">flach</span>"+
+	"    </span>"+
 	", "+
-	"<mark>"+
-	"<span xlink:title=\"lwc/d:MO\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15845\">ganz</span>"+
+	"    <mark>"+
+	"      <span xlink:title=\"lwc/d:MO\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15845\">ganz</span>"+
 	" "+
-	"<span xml:id=\"token-WDD17/982/72848-p15845\">"+
-	"<span xlink:title=\"lwc/d:CJ\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15843\">flach</span>"+
-	"</span>"+
-	"</mark>"+
-	"</span>"+
+	"      <span xml:id=\"token-WDD17/982/72848-p15845\">"+
+	"        <span xlink:title=\"lwc/d:CJ\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15843\">flach</span>"+
+	"      </span>"+
+	"    </mark>"+
+	"  </span>"+
 	"</span>"+
 	"<span class=\"context-right\"></span>";
 
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index 921c699..4a1ddc2 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -105,34 +105,60 @@
         // Element node

         if (c.nodeType == 1) {

 

-          var xmlid, target;

+          var xmlid, target, start, end;

 

           // Node is an identifier

           if (c.hasAttribute('xml:id')) {

 

             // Remember that pos has this identifier

             xmlid = c.getAttribute('xml:id');

-            this.temp['target'][xmlid] = [this.temp['pos'], this.temp['pos']];

+            // this.temp['target'][xmlid] =

+            start = this.temp['pos'];

+            end = this.temp['pos'];

           }

 

-          // Node is a relation

+          // Node is a link

+          // Stricter: && c.hasAttribute('xlink:show')

           else if (c.hasAttribute('xlink:href')) {

-            var label;

 

-            // Get target id

-            target = c.getAttribute('xlink:href').replace(/^#/, "");

+            // Node is a continuation

+            if (c.getAttribute('xlink:show') == "other" &&

+                c.hasAttribute('data-action') &&

+                c.getAttribute('data-action') == "join"

+               ) {

+              xmlid = c.getAttribute('xlink:href').replace(/^#/, "");

+              start = this.temp['pos'];

+              end = this.temp['pos'];

 

-            if (c.hasAttribute('xlink:title')) {

-              label = this._clean(c.getAttribute('xlink:title'));

+              // this.temp['target'][xmlid][1] = this.temp['pos'] -1;

+              // console.log("Here");

+            }

+

+            // Node is a relation

+            // Stricter: c.getAttribute('xlink:show') == "none"

+            else {

+              var label;

+

+              // Get target id

+              target = c.getAttribute('xlink:href').replace(/^#/, "");

+

+              if (c.hasAttribute('xlink:title')) {

+                label = this._clean(c.getAttribute('xlink:title'));

+              };

+

+              // Remember the defined edge

+              var edge = {

+                label    : label,

+                srcStart : this.temp['pos'],

+                targetID : target

+              };

+

+              // TEMP: Hot-fix for root relations

+              if (!label.match(/--$/) && !label.match(/ROOT$/)) {

+                this.temp['edges'].push(edge);

+              };

+

             };

-

-            // Remember the defined edge

-            var edge = {

-              label    : label,

-              srcStart : this.temp['pos'],

-              targetID : target

-            };

-            this.temp['edges'].push(edge);

           };

 

           // Go on with child nodes

@@ -140,8 +166,25 @@
             this._parse(0, c.childNodes, mark);

           };

 

+

+          // The element is a defined anchor

           if (xmlid !== undefined) {

-            this.temp['target'][xmlid][1] = this.temp['pos'] -1;

+

+            // this.temp['target'][xmlid][1] = this.temp['pos'] -1;

+

+            // Element already defined

+            if (this.temp['target'][xmlid] !== undefined) {

+              var newtarget = this.temp['target'][xmlid];

+              end = this.temp['pos'] - 1;

+              newtarget[0] = start < newtarget[0] ? start : newtarget[0];

+              newtarget[1] = end > newtarget[1] ? end : newtarget[1];

+            }

+

+            // Element not yet defined

+            else {

+              end = this.temp['pos'] - 1;

+              this.temp['target'][xmlid] = [start, end];

+            };

 

             /*

             console.log('Target ' + xmlid + ' spans from ' +

@@ -152,8 +195,13 @@
             */

             xmlid = undefined;

           }

+

+          // Current element describes an arc

           else if (target !== undefined) {

+

+            // TODO: This does not work yet!

             edge["srcEnd"] = this.temp['pos'] -1;

+            // console.log('Here');

 

             /*

             console.log('Source spans from ' +

@@ -183,6 +231,8 @@
           };

         }

       };

+

+      // Todo: define edges here!

     },