Mark matches in tree visualizations
diff --git a/dev/demo/matchdemo.js b/dev/demo/matchdemo.js
index adac3c4..9d2d915 100644
--- a/dev/demo/matchdemo.js
+++ b/dev/demo/matchdemo.js
@@ -49,7 +49,7 @@
" </span>" +
"</span>";
-var treeSnippet =
+ var treeSnippet =
"<span class=\"context-left\"></span>" +
"<span class=\"match\">" +
" <span title=\"xip/c:MC\">" +
@@ -64,13 +64,15 @@
" </span>" +
" </span>" +
" <span title=\"xip/c:VERB\">ist</span>" +
- " <span title=\"xip/c:NP\">" +
- " <span title=\"xip/c:PRON\">es</span>" +
- " </span>" +
- " <span title=\"xip/c:AP\">" +
- " <span title=\"xip/c:ADV\">nun</span>" +
- " <span title=\"xip/c:ADJ\">möglich</span>" +
- " </span>" +
+ " <mark>" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:PRON\">es</span>" +
+ " </span>" +
+ " <span title=\"xip/c:AP\">" +
+ " <span title=\"xip/c:ADV\">nun</span>" +
+ " <span title=\"xip/c:ADJ\">möglich</span>" +
+ " </span>" +
+ " </mark>" +
" <span title=\"xip/c:ADV\">z. B.</span>" +
" <span title=\"xip/c:NPA\">" +
" <span title=\"xip/c:NP\">" +
@@ -106,7 +108,7 @@
"</span>" +
"<span class=\"context-right\"></span>";
- var treeSnippet = "<span class=\"context-left\"><\/span><span class=\"match\">In diesem <span title=\"cnx\/c:np\">Sinne<\/span> schrieb <span title=\"cnx\/c:np\">Brunschwicg<\/span>:"In <span title=\"cnx\/c:np\">Euklids<\/span> <span title=\"cnx\/c:np\">Elementen<\/span> <span title=\"cnx\/c:np\">spiegel<\/span> sich die <span title=\"cnx\/c:np\">Resultate<\/span> der <span title=\"cnx\/c:np\">Arbeit von Generationen vor Aristoteles<\/span> wider, nicht nur die <span title=\"cnx\/c:np\">technische Arbeit<\/span> der <span title=\"cnx\/c:np\">Entdecklung<\/span>, sondern auch die <span title=\"cnx\/c:np\">methodologische Arbeit<\/span> der <span title=\"cnx\/c:np\">Verbindung<\/span> und des <span title=\"cnx\/c:np\">Beweises<\/span>, die, in der <span title=\"cnx\/c:np\">Schule<\/span> des <span title=\"cnx\/c:np\">Phythagoras<\/span> begonnen, ihre <span title=\"cnx\/c:np\">Vollendung in den Schulen von Eudoxos von Cnidus<\/span> und <span title=\"cnx\/c:np\">Platon<\/span> gefunden hat"(5<\/span><span class=\"context-right\"><\/span>";
+// var treeSnippet = "<span class=\"context-left\"><\/span><span class=\"match\">In diesem <span title=\"cnx\/c:np\">Sinne<\/span> schrieb <span title=\"cnx\/c:np\">Brunschwicg<\/span>:"In <span title=\"cnx\/c:np\">Euklids<\/span> <span title=\"cnx\/c:np\">Elementen<\/span> <span title=\"cnx\/c:np\">spiegel<\/span> sich die <span title=\"cnx\/c:np\">Resultate<\/span> der <span title=\"cnx\/c:np\">Arbeit von Generationen vor Aristoteles<\/span> wider, nicht nur die <span title=\"cnx\/c:np\">technische Arbeit<\/span> der <span title=\"cnx\/c:np\">Entdecklung<\/span>, sondern auch die <span title=\"cnx\/c:np\">methodologische Arbeit<\/span> der <span title=\"cnx\/c:np\">Verbindung<\/span> und des <span title=\"cnx\/c:np\">Beweises<\/span>, die, in der <span title=\"cnx\/c:np\">Schule<\/span> des <span title=\"cnx\/c:np\">Phythagoras<\/span> begonnen, ihre <span title=\"cnx\/c:np\">Vollendung in den Schulen von Eudoxos von Cnidus<\/span> und <span title=\"cnx\/c:np\">Platon<\/span> gefunden hat"(5<\/span><span class=\"context-right\"><\/span>";
KorAP.API.getMatchInfo = function(match, callObj, cb) {
if (callObj["spans"] !== undefined && callObj["spans"] === true) {
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index 80690e5..f365045 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -82,13 +82,15 @@
" </span>" +
" </span>" +
" <span title=\"xip/c:VERB\">ist</span>" +
- " <span title=\"xip/c:NP\">" +
- " <span title=\"xip/c:PRON\">es</span>" +
- " </span>" +
- " <span title=\"xip/c:AP\">" +
- " <span title=\"xip/c:ADV\">nun</span>" +
- " <span title=\"xip/c:ADJ\">möglich</span>" +
- " </span>" +
+ " <mark>" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:PRON\">es</span>" +
+ " </span>" +
+ " <span title=\"xip/c:AP\">" +
+ " <span title=\"xip/c:ADV\">nun</span>" +
+ " <span title=\"xip/c:ADJ\">möglich</span>" +
+ " </span>" +
+ " </mark>" +
" <span title=\"xip/c:ADV\">z. B.</span>" +
" <span title=\"xip/c:NPA\">" +
" <span title=\"xip/c:NP\">" +
@@ -393,8 +395,8 @@
var info = matchClass.create(match).info();
expect(info).toBeTruthy();
info.getTree(undefined, undefined, function (treem) {
- tree = treem;
- done();
+ tree = treem;
+ done();
});
});
@@ -403,9 +405,9 @@
expect(tree.nodes()).toEqual(49);
});
-
- var info, matchElement;
- it('should parse into a tree view', function () {
+ var matchElement, info;
+ // var info, matchElement;
+ it('should parse into a tree view', function () {
matchElement = matchElementFactory();
expect(matchElement.tagName).toEqual('LI');
@@ -435,7 +437,7 @@
it('should add a tree view async 1', function (done) {
expect(info).toBeTruthy();
info.addTree('mate', 'beebop', function () {
- done();
+ done();
});
});
diff --git a/dev/js/src/match/tree.js b/dev/js/src/match/tree.js
index e45d05f..dcecd5e 100644
--- a/dev/js/src/match/tree.js
+++ b/dev/js/src/match/tree.js
@@ -59,12 +59,12 @@
// This is a new root
this._addNode(
- this._next++,
- { "class" : "root" }
+ this._next++,
+ { "class" : "root" }
);
// Parse nodes from root
- this._parse(0, html.childNodes);
+ this._parse(0, html.childNodes, undefined);
// Root node has only one child - remove
if (g.outEdges(0).length === 1)
@@ -86,6 +86,7 @@
obj["width"] = WIDTH;
obj["height"] = HEIGHT;
this._graph.setNode(id, obj)
+ return obj;
},
// Add new edge to graph
@@ -99,50 +100,62 @@
},
// Parse the snippet
- _parse : function (parent, children) {
+ _parse : function (parent, children, mark) {
for (var i in children) {
- var c = children[i];
+ var c = children[i];
- // Element node
- if (c.nodeType == 1) {
+ // Element node
+ if (c.nodeType == 1) {
- // Get title from html
- if (c.getAttribute("title")) {
- var title = this._clean(c.getAttribute("title"));
+ // Get title from html
+ if (c.getAttribute("title")) {
+ var title = this._clean(c.getAttribute("title"));
- // Add child node
- var id = this._next++;
+ // Add child node
+ var id = this._next++;
- this._addNode(id, {
- "class" : "middle",
- "label" : title
- });
- this._addEdge(parent, id);
+ var obj = this._addNode(id, {
+ "class" : "middle",
+ "label" : title
+ });
+
+ if (mark !== undefined) {
+ obj.class += ' mark';
+ };
+
+ this._addEdge(parent, id);
- // Check for next level
- if (c.hasChildNodes())
- this._parse(id, c.childNodes);
- }
+ // Check for next level
+ if (c.hasChildNodes())
+ this._parse(id, c.childNodes, mark);
+ }
- // Step further
- else if (c.hasChildNodes())
- this._parse(parent, c.childNodes);
- }
+ // Step further
+ else if (c.hasChildNodes()) {
- // Text node
- else if (c.nodeType == 3)
+ if (c.tagName === 'MARK') {
+ this._parse(parent, c.childNodes, true);
+ }
+ else {
+ this._parse(parent, c.childNodes, mark);
+ };
+ };
+ }
- if (c.nodeValue.match(/[-a-z0-9]/i)) {
+ // Text node
+ else if (c.nodeType == 3)
- // Add child node
- var id = this._next++;
- this._addNode(id, {
- "class" : "leaf",
- "label" : c.nodeValue
- });
+ if (c.nodeValue.match(/[-a-z0-9]/i)) {
- this._addEdge(parent, id);
- };
+ // Add child node
+ var id = this._next++;
+ this._addNode(id, {
+ "class" : "leaf",
+ "label" : c.nodeValue
+ });
+
+ this._addEdge(parent, id);
+ };
};
return this;
},
@@ -197,7 +210,7 @@
function (v) {
v = g.node(v);
var group = document.createElementNS(svgXmlns, 'g');
- group.classList.add(v.class);
+ group.setAttribute('class', v.class);
// Add node box
var rect = group.appendChild(document.createElementNS(svgXmlns, 'rect'));
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index 709eef7..1050924 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -241,16 +241,33 @@
fill: $middle-orange;
}
+g.middle.mark {
+ rect {
+ fill: $darker-orange;
+ }
+ > text {
+ fill: $light-orange;
+ > tspan {
+ stroke: $light-orange;
+ }
+ }
+}
+
+
+g.leaf.mark text > tspan {
+ font-weight: bold;
+}
+
g.leaf > rect {
display: none;
}
-g > text {
+g > text > tspan {
text-anchor: middle;
font-size: 9pt;
}
-g.leaf > text {
+g.leaf > text > tspan {
font-size: 10pt;
overflow: visible;
}