dev/js/src/match/treearc.js

/**
 * Parse a relational tree and visualize using arcs.
 *
 * @author Nils Diewald
 */
"use strict";

define([], function () {

  const svgNS = "http://www.w3.org/2000/svg";
  const _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
  const d = document;

  return {
    create : function (snippet) {
      return Object.create(this)._init(snippet);
    },

    // Initialize the state of the object
    _init : function (snippet) {

      const t = this;

      // Predefine some values
      t._tokens  = [];
      t._arcs    = [];
      t._tokenElements = [];
      t._y = 0;
      t._currentInFocus = undefined;

      // Some configurations
      t.maxArc      = 200; // maximum height of the bezier control point
      t.overlapDiff = 40;  // Difference on overlaps and minimum height for self-refernces
      t.arcDiff     = 15;
      t.anchorDiff  = 8;
      t.anchorStart = 15;
      t.tokenSep    = 30;
      t.xPadding    = 10;
      t.yPadding    = 5;

      // No snippet to process
      if (snippet == undefined || snippet == null)
        return t;

      // Parse the snippet
      const html = d.createElement("div");
      html.innerHTML = snippet;

      // Establish temporary parsing memory
      t.temp = {
        target : {}, // Remember the map id => pos        
        edges  : [], // Remember edge definitions
        pos    : 0   // Keep track of the current token position
      };

      // Start parsing from root
      t._parse(0, html.childNodes, undefined);

      // Establish edge list
      const targetMap = t.temp['target'];
      const edges = t.temp['edges'];

      let targetID, target, relation;
      
      // Iterate over edge lists
      // TODO:
      //   Support spans for anchors!
      edges.forEach(function(edge) {

        // Check the target identifier
        targetID = edge.targetID;
        target = targetMap[targetID];

        if (target != undefined) {

          // Check if the source is a span anchor
          /*
          var start = edge.srcStart;
          if (start !== edge.srcEnd) {
            start = [start, edge.srcEnd];
          };
          */
          
          // Add relation
          relation = {
            start : [edge.srcStart, edge.srcEnd],
            end : target,
            direction : 'uni',
            label : edge.label
          };
          // console.log(relation);
          this.addRel(relation);
        };
      }, t);

      // Reset parsing memory
      delete t["temp"];

      return this;
    },

    // Parse a node of the tree snippet
    _parse : function (parent, children, mark) {

      // Iterate over all child nodes
      Array.from(children).forEach(function(c) {

        // Element node
        if (c.nodeType == 1) {

          let 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] =
            start = this.temp['pos'];
            end = this.temp['pos'];
          }

          // Node is a link
          // Stricter: && c.hasAttribute('xlink:show')
          else if (c.hasAttribute('xlink:href')) {

            // 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'];

              // this.temp['target'][xmlid][1] = this.temp['pos'] -1;
              // console.log("Here");
            }

            // Node is a relation
            // Stricter: c.getAttribute('xlink:show') == "none"
            else {
              let 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
// WRONG!
              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);
              };

            };
          };

          // Go on with child nodes
          if (c.hasChildNodes()) {
            this._parse(0, c.childNodes, mark);
          };


          // The element is a defined anchor
          if (xmlid !== undefined) {

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

            // Element already defined
            if (this.temp['target'][xmlid] !== undefined) {
              const 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 ' +
                        this.temp['target'][xmlid][0] +
                        ' to ' +
                        this.temp['target'][xmlid][1]
                       );
            */
            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 ' +
                        edge["srcStart"] +
                        ' to ' +
                        edge["srcEnd"]
                       );
            */
            target = undefined;
          };
        }

        // Text node
        else if (c.nodeType == 3) {

          // Check, if there is a non-whitespace token
          if (c.nodeValue !== undefined) {

            const str = c.nodeValue.trim();

            if (str !== undefined && str.length > 0) {

              // Add token to token list
              this.addToken(str);

              // Move token position
              this.temp['pos']++;
            };
          };
        };
      }, this);

      // Todo: define edges here!
    },

    
    // Remove foundry and layer for labels
    _clean : function (title) {
      return title.replace(_TermRE, "$3");
    },

    
    // Return the number of leaf nodes
    // (not necessarily part of a relation).
    // Consecutive nodes that are not part of any
    // relation are summarized in one node.
    size : function () {
      return this._tokens.length;
    },

    
    // This is a shorthand for SVG element creation
    _c : function (tag) {
      return d.createElementNS(svgNS, tag);
    },


    // Get bounding box - with workaround for text nodes
    _rect : function (node) {
      if (node.tagName == "tspan" && !navigator.userAgent.match(/Edge/)) {
        const range = d.createRange();
        range.selectNode(node);
        const rect = range.getBoundingClientRect();
        range.detach();
        return rect;
      };
      return node.getBoundingClientRect();
    },


    // Returns the center point of the requesting token
    _tokenPoint : function (node) {
	    const box = this._rect(node);
	    return box.left + (box.width / 2);
    },


    // Draws an anchor
    _drawAnchor : function (anchor) {

      // Calculate the span of the first and last token, the anchor spans
      const firstBox = this._rect(this._tokenElements[anchor.first]);
      const lastBox  = this._rect(this._tokenElements[anchor.last]);
	
      const y = this._y + (anchor.overlaps * this.anchorDiff) - this.anchorStart;
      const l = this._c('path');
      
	    this._arcsElement.appendChild(l);

      const pathStr = "M " +
          (firstBox.left - this.offsetLeft) +
          "," +
          y +
          " L " +
          (lastBox.right - this.offsetLeft) +
          "," + y;

      l.setAttribute("d", pathStr);
      l.setAttribute("class", "anchor");
      anchor.element = l;
      anchor.y = y;
      return l;
    },
    

    // Create an arc with an optional label
    // Potentially needs a height parameter for stacks
    _drawArc : function (arc) {

      const t = this;
      let startPos, endPos;
      let startY = this._y;
      let endY = this._y;
	
      if (arc.startAnchor !== undefined) {
        startPos = t._tokenPoint(arc.startAnchor.element);
        startY = arc.startAnchor.y;
      }
      else {
        startPos = t._tokenPoint(t._tokenElements[arc.first]);
      };

      if (arc.endAnchor !== undefined) {
        endPos = t._tokenPoint(arc.endAnchor.element)
        endY = arc.endAnchor.y;
      }
      else {
        endPos = t._tokenPoint(t._tokenElements[arc.last]);
      };

      startPos -= t.offsetLeft;
      endPos -= t.offsetLeft;

	    // Special treatment for self-references
      var overlaps = arc.overlaps;
      if (startPos == endPos) {
        startPos -= t.overlapDiff / 3;
        endPos   += t.overlapDiff / 3;
        overlaps += .5;
      };

      const g = t._c("g");
      g.setAttribute("class", "arc");
      const p = g.appendChild(t._c("path"));
      p.setAttribute('class', 'edge');
      
      // Attach the new arc before drawing, so computed values are available
      t._arcsElement.appendChild(g);

      // Create arc
      let middle = Math.abs(endPos - startPos) / 2;

      // TODO:
      //   take the number of tokens into account!
      let cHeight = t.arcDiff + (overlaps * t.overlapDiff) + (middle / 2);

      // Respect the maximum height
      cHeight = cHeight < t.maxArc ? cHeight : t.maxArc;

      var x = Math.min(startPos, endPos);

      //var controlY = (startY + endY - cHeight);
      let controlY = (endY - cHeight);
      
      const arcE = "M "+ startPos + "," + startY +
          " C " + startPos + "," + controlY +
          " " + endPos + "," + controlY +
          " " + endPos + "," + endY;

      p.setAttribute("d", arcE);

      if (arc.direction !== undefined) {
        p.setAttribute("marker-end", "url(#arr)");
        if (arc.direction === 'bi') {
          p.setAttribute("marker-start", "url(#arr)");
        };
      };

      if (arc.label === undefined)
        return g;
      
      /*
       * Calculate the top point of the arc for labeling using
       * de Casteljau's algorithm, see e.g.
       * http://blog.sklambert.com/finding-the-control-points-of-a-bezier-curve/
       * of course simplified to symmetric arcs ...
       */
      // Interpolate one side of the control polygon
      let middleY = (((startY + controlY) / 2) + controlY) / 2;

      // Create a boxed label
      const label = this._c("g");
      label.setAttribute("class", "label");
      t._labelsElement.appendChild(label);

      // Set arc reference
      label.arcRef = g;

      const that = t;
      label.addEventListener('mouseenter', function () {
        that.inFocus(this);
      });

      const labelE = label.appendChild(t._c("text"));
      labelE.setAttribute("x", x + middle);
      labelE.setAttribute("y", middleY + 3);
      labelE.setAttribute("text-anchor", "middle");
      const textNode = d.createTextNode(arc.label);
      labelE.appendChild(textNode);

      const labelBox   = labelE.getBBox();

      /*
      if (!labelBox)
        console.log("----");
      */
      
      const textWidth  = labelBox.width; // labelE.getComputedTextLength();
      const textHeight = labelBox.height; // labelE.getComputedTextLength();

      // Add box with padding to left and right
      const labelR = label.insertBefore(t._c("rect"), labelE);
      const boxWidth = textWidth + 2 * t.xPadding;
      labelR.setAttribute("x", x + middle - (boxWidth / 2));
      labelR.setAttribute("ry", 5);
      labelR.setAttribute("y", labelBox.y - t.yPadding);
      labelR.setAttribute("width", boxWidth);
      labelR.setAttribute("height", textHeight + 2 * t.yPadding);
    },


    /**
     * Get the svg element
     */
    element : function () {
      if (this._el !== undefined)
        return this._el;

      // Create svg
      const svg = this._c("svg");

      window.addEventListener("resize", function () {
        // TODO:
        //   Only if text-size changed!
        // TODO:
        //   This is currently untested
        this.show();
      }.bind(this));

      // Define marker arrows
      const defs = svg.appendChild(this._c("defs"));
      const marker = defs.appendChild(this._c("marker"));
      marker.setAttribute("refX", 9);
      marker.setAttribute("id", "arr");
      marker.setAttribute("orient", "auto-start-reverse");
      marker.setAttribute("markerUnits","userSpaceOnUse");

      const arrow = this._c("path");
      arrow.setAttribute("transform", "scale(0.8)");
      arrow.setAttribute("d", "M 0,-5 0,5 10,0 Z");
      marker.appendChild(arrow);

      this._el = svg;
      return this._el;
    },


    // Add a relation with a start, an end,
    // a direction value and an optional label text
    addRel : function (rel) {
      this._arcs.push(rel);
      return this;
    },


    // Add a token to the list (this will mostly be a word)
    addToken : function(token) {
      this._tokens.push(token);
      return this;
    },


    // Move label and arc in focus
    inFocus : function (element) {
      let cif;

      if (this._currentInFocus) {

        // Already in focus
        if (this._currentInFocus === element)
          return;

        cif = this._currentInFocus;
        cif.classList.remove('infocus');
        cif.arcRef.classList.remove('infocus');
      };

      cif = this._currentInFocus = element;
      this._labelsElement.appendChild(cif);
      this._arcsElement.appendChild(cif.arcRef);
      cif.classList.add('infocus');
      cif.arcRef.classList.add('infocus');
    },
    

    /*
     * All arcs need to be sorted before shown,
     * to avoid nesting.
     */
    _sortArcs : function () {

      // TODO:
      //   Keep in mind that the arcs may have long anchors!
      //   1. Iterate over all arcs
      //   2. Sort all multi
      let anchors = {};
      
      // 1. Sort by length
      // 2. Tag all spans with the number of overlaps before
      //    a) Iterate over all spans
      //    b) check the latest preceeding overlapping span (lpos)
      //       -> not found: tag with 0
      //       -> found: Add +1 to the level of the (lpos)
      //    c) If the new tag is smaller than the previous element,
      //       reorder

      // Normalize start and end
      const sortedArcs = this._arcs.map(function (v) {

        // Check for long anchors
        if (v.start instanceof Array) {

          if (v.start[0] == v.start[1]) {
            v.start = v.start[0];
          }

          else {
          
            const middle = Math.ceil(Math.abs(v.start[1] - v.start[0]) / 2) + v.start[0];

            // Calculate signature to avoid multiple anchors
            let anchorSig = "#" + v.start[0] + "_" + v.start[1];

            // Reverse signature
            if (v.start[0] > v.start[1]) {
              anchorSig = "#" + v.start[1] + "_" + v.start[0];
            };
            
            // Check if the anchor already exist
            let anchor = anchors[anchorSig];
            if (anchor === undefined) {
              anchor = {
                "first":   v.start[0],
                "last" :   v.start[1],
                "length" : v.start[1] - v.start[0]
              };
              anchors[anchorSig] = anchor;
            };

            v.startAnchor = anchor;

            // Add to anchors list
            v.start = middle;
          };
        };

        if (v.end instanceof Array) {

          if (v.end[0] == v.end[1]) {
            v.end = v.end[0];
          }

          else {

            const middle = Math.abs(v.end[0] - v.end[1]) + v.end[0];

            // Calculate signature to avoid multiple anchors
            let anchorSig = "#" + v.end[0] + "_" + v.end[1];

            // Reverse signature
            if (v.end[0] > v.end[1]) {
              anchorSig = "#" + v.end[1] + "_" + v.end[0];
            };

            // Check if the anchor already exist
            var anchor = anchors[anchorSig];
            if (anchor === undefined) {
              anchor = {
                "first":   v.end[0],
                "last" :   v.end[1],
                "length" : v.end[1] - v.end[0]
              };
              anchors[anchorSig] = anchor;
            };
            
            v.endAnchor = anchor;

            // Add to anchors list
            v.end = middle;
          };
        };

        v.first = v.start;
        v.last  = v.end;

        // calculate the arch length
        if (v.start < v.end) {
          v.length = v.end - v.start;
        }

        else {
          v.length = v.start - v.end;
        };

        return v;
      });

      // Sort based on length
      sortedArcs.sort(function (a, b) {
        if (a.length < b.length)
          return -1;
        else
          return 1;
      });

      // Add sorted arcs and anchors
      this._sortedArcs    = lengthSort(sortedArcs, false);
      this._sortedAnchors = lengthSort(Object.values(anchors), true);
    },


    /**
     * Center the viewport of the canvas
     * TODO:
     *   This is identical to treehierarchy
     */
    center : function () {
      if (this._el === undefined)
       return;

      const treeDiv = this._el.parentNode;

      const cWidth = parseFloat(window.getComputedStyle(this._el).width);
      const treeWidth = parseFloat(window.getComputedStyle(treeDiv).width);
      // Reposition:
      if (cWidth > treeWidth) {
       var scrollValue = (cWidth - treeWidth) / 2;
       treeDiv.scrollLeft = scrollValue;
      };
    },


    // Show the element
    show : function () {
      const t = this;
      const svg = this._el;
      const height = this.maxArc;

      // Delete old group
      if (svg.getElementsByTagName("g")[0] !== undefined) {
        svg.removeChild(
          svg.getElementsByTagName("g")[0]
        );
        t._tokenElements = [];
      };

      const g = svg.appendChild(t._c("g"));

      // Draw token list
      const text = g.appendChild(t._c("text"));
      text.setAttribute('class', 'leaf');
      text.setAttribute("text-anchor", "start");
      text.setAttribute("y", height);

      // Calculate the start position
      t._y = height - (t.anchorStart);

      // Introduce some prepending whitespace (yeah - I know ...)
      const ws = text.appendChild(t._c("tspan"));
      ws.appendChild(d.createTextNode('\u00A0'));
      ws.style.textAnchor = "start";
      
      t._tokens.forEach(function(node_i) {
        // Append svg
        // var x = text.appendChild(this._c("text"));
        const tspan = text.appendChild(this._c("tspan"));
        tspan.appendChild(d.createTextNode(node_i));
        tspan.setAttribute("text-anchor", "middle");
        
        this._tokenElements.push(tspan);

        // Add whitespace!
        tspan.setAttribute("dx", this.tokenSep);
      }, t);

      // Get some global position data that may change on resize
      t.offsetLeft = t._rect(g).left;

      // The group of arcs
      const arcs = g.appendChild(t._c("g"));
      t._arcsElement = arcs;
      arcs.classList.add("arcs");

      const labels = g.appendChild(t._c("g"));
      t._labelsElement = labels;
      labels.classList.add("labels");

      // Sort arcs if not sorted yet
      if (t._sortedArcs === undefined)
        t._sortArcs();

      // 1. Draw all anchors
      t._sortedAnchors.forEach(
        i => t._drawAnchor(i)
      );

      // 2. Draw all arcs
      t._sortedArcs.forEach(
        i => t._drawArc(i)
      );

      // Resize the svg with some reasonable margins
      svg.setAttribute("width", t._rect(text).width + 20);
      svg.setAttribute("height", height + 20);
      svg.setAttribute("class", "relTree");
    }
  };

  // Sort relations regarding their span
  function lengthSort (list, inclusive) {

    /*
     * The "inclusive" flag allows to
     * modify the behaviour for inclusivity check,
     * e.g. if identical start or endpoints mean overlap or not.
     */
    
    let stack = [];

    // Iterate over all definitions
    list.forEach(function(current) {

      // Check the stack order
      let overlaps = 0;
      let check;
      for (let j = (stack.length - 1); j >= 0; j--) {
        check = stack[j];

        // (a..(b..b)..a)
        if (current.first <= check.first && current.last >= check.last) {
          overlaps = check.overlaps + 1;
          break;
        }

        // (a..(b..a)..b)
        else if (current.first <= check.first && current.last >= check.first) {

          if (inclusive || (current.first != check.first && current.last != check.first)) {
            overlaps = check.overlaps + (current.length == check.length ? 0 : 1);
          };
        }
        
        // (b..(a..b)..a)
        else if (current.first <= check.last && current.last >= check.last) {

          if (inclusive || (current.first != check.last && current.last != check.last)) {
            overlaps = check.overlaps + (current.length == check.length ? 0 : 1);
          };
        };
      };

      // Set overlaps
      current.overlaps = overlaps;

      stack.push(current);

      // Although it is already sorted,
      // the new item has to be put at the correct place
      // TODO:
      //   Use something like splice() instead
      stack.sort(function (a,b) {
        b.overlaps - a.overlaps
      });
    });

    return stack;
  };
});