Trial with Tree builder
diff --git a/public/js/translateTree.js b/public/js/translateTree.js
index 0ade20b..e7ce83d 100644
--- a/public/js/translateTree.js
+++ b/public/js/translateTree.js
@@ -1,87 +1,128 @@
var cleanRegex = /^([^\/]+?\/)?[^\:]+?\:/;
-// SnippetTree constructor
-function SnippetTree (obj) {
- this.children = [];
- this.data = obj;
+var renderer = new dagreD3.Renderer();
+var oldDrawNodes = renderer.drawNodes();
+renderer.drawNodes(
+ function (graph, root) {
+ var svgNodes = oldDrawNodes(graph, root);
+ svgNodes.each(function(u) {
+ d3.select(this).classed(graph.node(u).nodeclass, true);
+ });
+ return svgNodes;
+ });
- // Replace title
+// Disable pan and zoom
+renderer.zoom(false);
+
+function SnippetTree (graph) {
+ this.next = new Number(0);
+ this.graph = graph;
+
+ // Fix title
this.cleanTitle = function (title) {
return title.replace(cleanRegex, "");
};
- // Add new child to tree
- this.addChild = function (childData) {
- var c = new SnippetTree (childData);
- this.children.push(c);
- return c;
- };
+ // This is a new root
+ this.graph.addNode(this.next++,{
+ nodeclass: "root"
+ })
- // Recursively parse children
- this.parseChildren = function (children) {
+ // Add the children to the node
+ this.parseChildren = function (parent, children) {
for (var i in children) {
var c = children[i];
- if (c.nodeType === 1) {
+
+ // Element node
+ if (c.nodeType == 1) {
+
+ // Get title from html
if (c.getAttribute("title")) {
var title = this.cleanTitle(c.getAttribute("title"));
- var childTree = this.addChild({ type : title });
- if (c.hasChildNodes())
- childTree.parseChildren(c.childNodes);
- }
- else if (c.hasChildNodes())
- this.parseChildren(c.childNodes);
- }
- else if (c.nodeType === 3)
- if (c.nodeValue.match(/[-a-z0-9]/i)) {
- this.addChild({
- type : "leaf",
- word : c.nodeValue
+
+ // Add child node
+ var id = this.next++;
+ this.graph.addNode(id, {
+ nodeclass : "middle",
+ label : title
});
+ this.graph.addEdge(null, parent, id);
+
+ // Check for next level
+ if (c.hasChildNodes())
+ this.parseChildren(id, c.childNodes);
+ }
+
+ // Step further
+ else if (c.hasChildNodes())
+ this.parseChildren(parent, c.childNodes);
+ }
+
+ // Text node
+ else if (c.nodeType == 3)
+ if (c.nodeValue.match(/[-a-z0-9]/i)) {
+ // Add child node
+ var id = this.next++;
+ this.graph.addNode(id, {
+ nodeclass : "leaf",
+ label : c.nodeValue
+ });
+ this.graph.addEdge(null, parent, id);
};
};
return this;
};
-
- // Recursively parse children
- this.parseChildren2 = function (children) {
- for (var i in children) {
- var c = children[i];
- if (c.nodeType === 1) {
- if (c.getAttribute("title")) {
- var title = this.cleanTitle(c.getAttribute("title"));
- var childTree = this.addChild({ type : title });
- if (c.hasChildNodes())
- childTree.parseChildren2(c.childNodes);
- }
- else if (c.hasChildNodes())
- this.parseChildren2(c.childNodes);
- }
- else if (c.nodeType === 3)
- if (c.nodeValue.match(/[-a-z0-9]/i)) {
- this.addChild({
- type : "leaf",
- word : c.nodeValue
- });
- };
- };
- return this;
- };
-
-
- this.toTable = function () {
-
- };
-
- var tree = document.createElement('tree');
- html.innerHTML = snippet;
- this.parseChildren2(html.childNodes);
};
-// Make tree from snippet
function translateTree (snippet) {
var html = document.createElement("tree");
html.innerHTML = snippet;
- return new SnippetTree({ type : "ROOT" }).parseChildren(html.childNodes);
+ var st = new SnippetTree(new dagreD3.Digraph());
+ st.parseChildren(0, html.childNodes);
+ var g = st.graph;
+
+ // Root node has only one child
+ if (Object.keys(g._outEdges[0]).length === 1)
+ g.delNode(0);
+ return g;
};
+function showTree (o, foundry, layer) {
+ var match = o.parentNode.parentNode;
+ var tree = d3.select(match).select("div > div.treeInfo");
+
+ if (tree.classed("active")) {
+ tree.classed("active", false);
+ return;
+ }
+ else if (!tree.select("svg").empty()) {
+ tree.classed("active", true);
+ return;
+ };
+
+ var corpusID = match.getAttribute('data-corpus-id');
+ var docID = match.getAttribute('data-doc-id');
+ var matchID = match.getAttribute('data-match-id');
+ var url =
+ '/corpus' +
+ '/' + corpusID +
+ '/' + docID +
+ '/' + matchID +
+ '?foundry=' + foundry +
+ '&layer=' + layer +
+ '&spans=true';
+
+ jQuery.getJSON(url, function (res) {
+ var svg = tree.append("svg");
+ var svgGroup = svg.append("svg:g");
+ var treething = translateTree(res['snippet']);
+
+ var layout = renderer.run(treething, svgGroup);
+
+ svg.attr("width", layout.graph().width + 40)
+ .attr("height", layout.graph().height + 40);
+
+ tree.classed("active", true);
+ });
+};