Improve relation tree visualizations
Change-Id: I99c414a61f48ad237746f54885ca7ef6afadb6dd
diff --git a/dev/demo/relations.html b/dev/demo/relations.html
index d651988..89abf06 100644
--- a/dev/demo/relations.html
+++ b/dev/demo/relations.html
@@ -5,43 +5,22 @@
<script data-main="relationsdemo.js" src="../js/lib/require.js" async="async"></script>
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
<style>
- tspan, text {
- font-size: 11pt;
- stroke-width: 0;
- line-height: 100%;
- stroke-opacity:0;
- padding-right: 3pt
- fill: black;
- }
- /*
- svg.relTree g > text > tspan {
- text-anchor: middle;
- }
- */
- g.arcs text {
- font-size: 9pt;
- fill: blue;
- }
- path {
- stroke-width: 2;
- stroke: black;
- fill: none;
- }
- path.anchor {
- stroke: green;
- z-index: 20;
- }
- marker > path {
- fill-opacity:1;
- fill: black;
- }
- marker {
- overflow:visible
- }
</style>
</head>
<body>
- <div id="tree"></div>
+ <div id="search">
+ <ol>
+ <li class="active action">
+ <div class="matchinfo">
+ <div class="matchtree">
+ <div id="treeRel"></div>
+ <div id="treeHier"></div>
+ </div>
+ </div>
+ </li>
+ </ol>
+ </div>
+
</body>
</html>
diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index 17fcfb3..12d536c 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -1,10 +1,69 @@
+var treeSnippet =
+ "<span class=\"context-left\"></span>" +
+ "<span class=\"match\">" +
+ " <span title=\"xip/c:MC\">" +
+ " <span title=\"xip/c:TOP\">" +
+ " <span title=\"xip/c:PP\">" +
+ " <span title=\"xip/c:PREP\">Mit</span>" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:DET\">dieser</span>" +
+ " <span title=\"xip/c:NPA\">" +
+ " <span title=\"xip/c:NOUN\">Methode</span>" +
+ " </span>" +
+ " </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>" +
+ " <span title=\"xip/c:ADV\">z. B.</span>" +
+ " <span title=\"xip/c:NPA\">" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:NOUN\">Voice</span>" +
+ " </span>" +
+ " </span>" + "(" +
+ " <span title=\"xip/c:INS\">" +
+ " <span title=\"xip/c:NPA\">" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:NOUN\">Sprache</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" + ")" +
+ " <span title=\"xip/c:VERB\">bevorzugt</span>" +
+ " <span title=\"xip/c:PP\">" +
+ " <span title=\"xip/c:PREP\">in</span>" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:PRON\">der</span>" +
+ " </span>" +
+ " <span title=\"xip/c:NPA\">" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:NOUN\">Bridge</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " <span title=\"xip/c:INFC\">" +
+ " <span title=\"xip/c:INS\">" +
+ " <span title=\"xip/c:VERB\">weiterzugeben</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ "</span>" +
+ "<span class=\"context-right\"></span>";
+
requirejs.config({
- baseUrl: '../js/src'
+ baseUrl: '../js/src',
+ paths : {
+ 'lib': '../lib'
+ }
});
-require(['match/relations'], function (relClass) {
+require(['match/relations', 'match/tree'], function (relClass, treeClass) {
var rel = relClass.create();
- document.getElementById("tree").appendChild(rel.element());
/*
* Start and end may be spans, i.e. arrays
@@ -31,6 +90,13 @@
.addRel({ start: [5,6], end: 7, label: "g" })
.addRel({ start: 4, end: [6,8], label: "f", direction: "bi" })
;
-
+
+ document.getElementById("treeRel").appendChild(rel.element());
+
+ // Todo: Probably rename to rel.draw()
rel.show();
+
+ var tree = treeClass.create(treeSnippet);
+ document.getElementById("treeHier").appendChild(tree.element());
});
+