Gitiles
Code Review Sign In
korap.ids-mannheim.de / KorAP / Kalamar / fe4c1b4afa6624a39f28725edf526577c5712901 / . / dev / demo / relationsdemo.js
blob: 9c2b38f51c291f84e2f026de7e6806cef9ec9a30 [file] [log] [blame]
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]1var treeSnippet =
2 "<span class=\"context-left\"></span>" +
3 "<span class=\"match\">" +
4 " <span title=\"xip/c:MC\">" +
5 " <span title=\"xip/c:TOP\">" +
6 " <span title=\"xip/c:PP\">" +
7 " <span title=\"xip/c:PREP\">Mit</span>" +
8 " <span title=\"xip/c:NP\">" +
9 " <span title=\"xip/c:DET\">dieser</span>" +
10 " <span title=\"xip/c:NPA\">" +
11 " <span title=\"xip/c:NOUN\">Methode</span>" +
12 " </span>" +
13 " </span>" +
14 " </span>" +
15 " <span title=\"xip/c:VERB\">ist</span>" +
16 " <span title=\"xip/c:NP\">" +
17 " <span title=\"xip/c:PRON\">es</span>" +
18 " </span>" +
19 " <span title=\"xip/c:AP\">" +
20 " <span title=\"xip/c:ADV\">nun</span>" +
21 " <span title=\"xip/c:ADJ\">möglich</span>" +
22 " </span>" +
23 " <span title=\"xip/c:ADV\">z. B.</span>" +
24 " <span title=\"xip/c:NPA\">" +
25 " <span title=\"xip/c:NP\">" +
26 " <span title=\"xip/c:NOUN\">Voice</span>" +
27 " </span>" +
28 " </span>" + "(" +
29 " <span title=\"xip/c:INS\">" +
30 " <span title=\"xip/c:NPA\">" +
31 " <span title=\"xip/c:NP\">" +
32 " <span title=\"xip/c:NOUN\">Sprache</span>" +
33 " </span>" +
34 " </span>" +
35 " </span>" + ")" +
36 " <span title=\"xip/c:VERB\">bevorzugt</span>" +
37 " <span title=\"xip/c:PP\">" +
38 " <span title=\"xip/c:PREP\">in</span>" +
39 " <span title=\"xip/c:NP\">" +
40 " <span title=\"xip/c:PRON\">der</span>" +
41 " </span>" +
42 " <span title=\"xip/c:NPA\">" +
43 " <span title=\"xip/c:NP\">" +
44 " <span title=\"xip/c:NOUN\">Bridge</span>" +
45 " </span>" +
46 " </span>" +
47 " </span>" +
48 " <span title=\"xip/c:INFC\">" +
49 " <span title=\"xip/c:INS\">" +
50 " <span title=\"xip/c:VERB\">weiterzugeben</span>" +
51 " </span>" +
52 " </span>" +
53 " </span>" +
54 " </span>" +
55 "</span>" +
56 "<span class=\"context-right\"></span>";
57
Akron21896622017-09-12 16:22:23 +0200[diff] [blame]58var relSnippet =
59 "<span class=\"context-left\"></span>" +
60 "<span class=\"match\">" +
61 " <span xml:id=\"token-GOE/AGA/01784-p199\">" +
62 " <span xlink:title=\"malt/d:ADV\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">dann</span>" +
63 " </span>" +
64 " zog " +
65 " <span xlink:title=\"malt/d:SUBJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">ich</span>" +
66 " <span xml:id=\"token-GOE/AGA/01784-p202\">" +
67 " <span xlink:title=\"malt/d:OBJA\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">mich</span>" +
68 " </span>" +
69 " <span xlink:title=\"malt/d:PP\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">gegen</span>" +
70 " <span xml:id=\"token-GOE/AGA/01784-p204\">" +
71 " <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p204\">das</span>" +
72 " </span>" +
73 " <span xlink:title=\"malt/d:PN\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p202\">Regiment</span>" +
74 " <span xml:id=\"token-GOE/AGA/01784-p206\">" +
75 " <span xlink:title=\"malt/d:AVZ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">zurück</span>" +
76 " </span>" +
77 " <span xml:id=\"token-GOE/AGA/01784-p207\">" +
78 " <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">und</span>" +
79 " </span>" +
80 " <span xml:id=\"token-GOE/AGA/01784-p208\">" +
81 " <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p206\">war</span>" +
82 " </span>" +
83 " <span xlink:title=\"malt/d:AUX\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p207\">bemüht</span>" +
84 "," +
85 " <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p211\">einige</span>" +
86 " <span xml:id=\"token-GOE/AGA/01784-p211\">" +
87 " <span xlink:title=\"malt/d:ATTR\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p211\">genaue</span>" +
88 " </span>" +
89 " <span xml:id=\"token-GOE/AGA/01784-p212\">" +
90 " <span xlink:title=\"malt/d:OBJA\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">Umrisse</span>" +
91 " </span>" +
92 " <span xlink:title=\"malt/d:OBJP\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">aufs</span>" +
93 " <span xlink:title=\"malt/d:PN\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p212\">Papier</span>" +
94 " <span xml:id=\"token-GOE/AGA/01784-p215\">" +
95 " <span xlink:title=\"malt/d:PART\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">zu</span>" +
96 " </span>" +
97 " <span xlink:title=\"malt/d:OBJI\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p208\">bringen</span>" +
98 ", um mir " +
99 " <span xml:id=\"token-GOE/AGA/01784-p219\">" +
100 " <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">die</span>" +
101 " </span>" +
102 " <span xml:id=\"token-GOE/AGA/01784-p220\">Bezüge</span>" +
103 " <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">und</span>" +
104 " <span xml:id=\"token-GOE/AGA/01784-p222\">" +
105 " <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p222\">die</span>" +
106 " </span>" +
107 " <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p220\">Distanzen</span>" +
108 " <mark>" +
109 " <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p225\">der</span>" +
110 " </mark>" +
111 " <span xml:id=\"token-GOE/AGA/01784-p225\">" +
112 " <span xlink:title=\"malt/d:ATTR\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p225\">landschaftlichen</span>" +
113 " </span>" +
114 " <span xml:id=\"token-GOE/AGA/01784-p226\">" +
115 " <span xlink:title=\"malt/d:GMOD\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p222\">Gegenstände</span>" +
116 " </span>" +
117 " <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">desto</span>" +
118 " <span xlink:title=\"malt/d:ADV\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p229\">besser</span>" +
119 " <span xml:id=\"token-GOE/AGA/01784-p229\">" +
120 " <span xlink:title=\"malt/d:PART\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p229\">zu</span>" +
121 " </span>" +
122 " <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p226\">imprimieren</span>" +
123 "</span>" +
124 "<span class=\"context-right\"></span>";
125
Akron71c87de2017-09-15 14:24:21 +0200[diff] [blame]126/*
127 * ___OBJA____
128 * |_________|____DET________
129 * |_________|____ |
130 * |_SUBJ_ | | |
131 * ___|_____|__ADV_ | ___PP____|
132 * | Y | | Y Y | Y|
133 * -|------ | -|-----|-- ----------
134 * dann zog ich mich gegen das Altern
135 * 1 2 3 4 5 6 7
136 */
137
138relSnippet =
Akron0d04a182017-09-15 14:34:50 +0200[diff] [blame]139// var relSnippetSimple =
Akron71c87de2017-09-15 14:24:21 +0200[diff] [blame]140 "<span class=\"context-left\"></span>" +
141 "<span class=\"match\">" +
142 " <span xml:id=\"token-1\">" +
143 " <span xlink:title=\"malt/d:ADV\" xlink:type=\"simple\" xlink:href=\"#token-4\">dann</span>" +
144 " zog " +
145 " </span>" +
146 " <span xlink:title=\"malt/d:SUBJ\" xlink:type=\"simple\" xlink:href=\"#token-1\">ich</span>" +
147 " <span xml:id=\"token-4\">" +
148 " <span xlink:title=\"malt/d:OBJA\" xlink:type=\"simple\" xlink:href=\"#token-1\">mich</span>" +
149 " <span xlink:title=\"malt/d:PP\" xlink:type=\"simple\" xlink:href=\"#token-3\">gegen</span>" +
150 " </span>" +
151 " <span xml:id=\"token-3\">" +
152 " <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-1\">" +
153 " das" +
154 " <span xml:id=\"token-2\">Altern</span>" +
155 " </span>" +
156 " </span>" +
157 "</span>" +
158 "<span class=\"context-right\"></span>";
159
Akron21896622017-09-12 16:22:23 +0200[diff] [blame]160
Akronfe4c1b42018-01-30 18:48:09 +0100[diff] [blame^]161// This is just a temprary example
162var relSnippet3 =
163 "<span class=\"context-left\"></span>"+
164 "<span class=\"match\">"+
165 "<span xml:id=\"token-WDD17/982/72848-p15836-15839\">"+
166 "<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">Ein</span>"+
167 " "+
168 "<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
169 " "+
170 "<span xml:id=\"token-WDD17/982/72848-p15838\">"+
171 "<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
172 "</span>"+
173 ": "+
174 "<span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
175 "<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">AL</span>"+
176 "</span>"+
177 "</span>"+
178
179 // Here is a double given id, that should use a join instead!
180 "<span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
181 ":"+
182 "<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
183 "<span xml:id=\"token-WDD17/982/72848-p15840\">"+
184 "<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">halt</span>"+
185 "</span>"+
186 "</span>"+
187 "</span>"+
188 "<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
189 " "+
190 "<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15842\">den</span>"+
191 " "+
192 "<span xml:id=\"token-WDD17/982/72848-p15842\">"+
193 "<span xlink:title=\"lwc/d:OA\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15843\">Ball</span>"+
194 "</span>"+
195 " "+
196 "<span xml:id=\"token-WDD17/982/72848-p15843\">"+
197 "<span xlink:title=\"lwc/d:PD\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15840\">flach</span>"+
198 "</span>"+
199 ", "+
200 "<mark>"+
201 "<span xlink:title=\"lwc/d:MO\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15845\">ganz</span>"+
202 " "+
203 "<span xml:id=\"token-WDD17/982/72848-p15845\">"+
204 "<span xlink:title=\"lwc/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15843\">flach</span>"+
205 "</span>"+
206 "</mark>"+
207 "</span>"+
208 "</span>"+
209 "<span class=\"context-right\"></span>";
210
211
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]212requirejs.config({
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]213 baseUrl: '../js/src',
214 paths : {
215 'lib': '../lib'
216 }
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]217});
218
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]219require(['match/relations', 'match/tree'], function (relClass, treeClass) {
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]220 var rel = relClass.create();
Akron3a4a08e2017-05-23 22:34:18 +0200[diff] [blame]221
222 /*
223 * Start and end may be spans, i.e. arrays
224 */
225
226 rel
227 .addToken("Der")
228 .addToken("alte")
229 .addToken("Mann")
230 .addToken("ging")
231 .addToken("über")
232 .addToken("die")
233 .addToken("breite")
234 .addToken("nasse")
235 .addToken("Straße")
236 ;
237
238 rel
Akron65d31082017-09-08 16:23:40 +0200[diff] [blame]239 .addRel({ start: 0, end: 1, label: "a", direction: "uni"})
240 .addRel({ start: 0, end: 1, label: "b", direction: "uni" })
Akron3a4a08e2017-05-23 22:34:18 +0200[diff] [blame]241 .addRel({ start: 1, end: 2, label: "c", direction: "bi" })
Akron65d31082017-09-08 16:23:40 +0200[diff] [blame]242 .addRel({ start: 0, end: 2, label: "dreizehn", direction: "uni" })
243 .addRel({ start: [2,4], end: 5, label: "e", direction: "uni" })
Akron6f1302b2017-09-13 12:46:02 +0200[diff] [blame]244 .addRel({ start: [5,6], end: 7, direction: "uni" })
Akron3a4a08e2017-05-23 22:34:18 +0200[diff] [blame]245 .addRel({ start: 4, end: [6,8], label: "f", direction: "bi" })
Akronfee0b622017-09-13 14:46:43 +0200[diff] [blame]246 .addRel({ start: 8, end: 8, label: "self", direction: "uni"})
Akron3a4a08e2017-05-23 22:34:18 +0200[diff] [blame]247 ;
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]248
249 document.getElementById("treeRel").appendChild(rel.element());
250
251 // Todo: Probably rename to rel.draw()
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]252 rel.show();
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]253
Akron671fdb92017-09-12 18:09:46 +0200[diff] [blame]254 var rel2 = relClass.create(relSnippet);
255 document.getElementById("treeRel2").appendChild(rel2.element());
256 rel2.show();
257
Akronfe4c1b42018-01-30 18:48:09 +0100[diff] [blame^]258 var rel3 = relClass.create(relSnippet3);
259 document.getElementById("treeRel3").appendChild(rel3.element());
260 rel3.show();
261
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]262 var tree = treeClass.create(treeSnippet);
263 document.getElementById("treeHier").appendChild(tree.element());
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]264});
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]265