Finalized tree view / removed d3
diff --git a/public/js/demo/matchInfo.html b/public/js/demo/matchInfo.html
index accb304..11ba7eb 100644
--- a/public/js/demo/matchInfo.html
+++ b/public/js/demo/matchInfo.html
@@ -3,24 +3,31 @@
<head>
<title>MatchInfo demo</title>
<meta charset="utf-8" />
+ <script src="../lib/dagre/dagre.min.js"></script>
+ <script src="../src/menu.js"></script>
<script src="../src/matchInfo.js"></script>
- <link type="text/css" rel="stylesheet"
- href="../../css/matchinfo.css"></link>
+ <link type="text/css" rel="stylesheet" href="../../css/font-awesome.min.css"></link>
+ <link type="text/css" rel="stylesheet" href="../../css/matchinfo.css"></link>
+ <link type="text/css" rel="stylesheet" href="../../css/menu.css"></link>
<style type="text/css" rel="stylesheet">
body {
background-color: #ffa500;
+}
+
+body, text {
font-family: tahoma, verdana, arial;
+ color: #444;
+}
+
+text {
+ fill: #444;
}
</style>
</head>
<body>
- <div class="matchinfo">
- <div class="matchtable"></div>
- </div>
-
<script>
var snippet = "<span title=\"cnx/l:meist\">" +
" <span title=\"cnx/p:ADV\">" +
@@ -62,18 +69,64 @@
" </span>" +
"</span>";
- // Override getMatchInfo API call
- KorAP.API.getMatchInfo = function() {
- return { "snippet": snippet };
- };
+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>";
-var info = KorAP.MatchInfo.create({
- 'corpusID' : 'WPD',
- 'docID' : 'UUU',
- 'textID' : '01912',
- 'pos' : 'p121-122'
-},
-[
+var available =[
'base/s=spans',
'corenlp/c=spans',
'corenlp/ne=tokens',
@@ -88,14 +141,49 @@
'tt/l=tokens',
'tt/p=tokens',
'tt/s=spans'
-]);
- var t = info.getTable();
- document.getElementsByClassName('matchtable')[0]
- .appendChild(t.element());
+];
+
+var match = {
+ 'corpusID' : 'WPD',
+ 'docID' : 'UUU',
+ 'textID' : '01912',
+ 'pos' : 'p121-122'
+};
+
+// Parse and show the table
+// Override getMatchInfo API call
+KorAP.API.getMatchInfo = function(match, callObj) {
+ if (callObj["spans"] !== undefined && callObj["spans"] === true) {
+ return { "snippet": treeSnippet };
+ }
+ else {
+ return { "snippet": snippet };
+ }
+};
+
+var e = KorAP.MatchInfo.create(match, available).element();
+document.getElementsByTagName('body')[0].appendChild(e);
+
+/*
+var t = KorAP.MatchInfo.create(match, available).getTable();
+document.getElementsByClassName('matchtable')[0]
+.appendChild(t.element());
+
+// parse and show the tree
+KorAP.API.getMatchInfo = function() {
+ return { "snippet": treeSnippet };
+};
+
+var tree = KorAP.MatchInfo.create(match, available).getTree();
+document.getElementsByClassName('matchtree')[0]
+.getElementsByTagName('div')[0]
+.appendChild(tree.element());
+
+tree.center();
+*/
</script>
-
-
+ <!--
<div class="matchinfo">
<div class="matchtable">
<table>
@@ -127,13 +215,14 @@
<th>es</th>
<th>z</th>
<td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
- <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
- <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
- </tr>
- </tbody>
- </table>
- </div>
-</div>
+ <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+ <td>ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ<br />ABC DEF GHI JKL MNO PQR STU VWX YZ ABC DEF GHI JKL MNO PQR STU VWX YZ</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ -->
</body>
</html>