Gitiles
Code Review Sign In
korap.ids-mannheim.de / KorAP / Kalamar / 8faceec0bf3153b2958b9c978419a2c5abc977dd / . / dev / demo / relationsdemo.js
blob: d2dd2a3018b9076a4d295c645284144c9ab9c804 [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
Akron8faceec2018-01-31 11:30:21 +0100[diff] [blame^]211relSnippet3 =
212 "<span class=\"context-left\"></span>"+
213 "<span class=\"match\">"+
214 "<span xml:id=\"token-WDD17/982/72848-p15836-15839\">"+
215 "<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">Ein</span>"+
216 " "+
217 "<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
218 " "+
219 "<span xml:id=\"token-WDD17/982/72848-p15838\">"+
220 "<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
221 "</span>"+
222 ": "+
223 "<span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
224 "<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">AL</span>"+
225 "</span>"+
226 "</span>"+
227 "<span xlink:type=\"join\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">"+
228 ":"+
229 "<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
230 "<span xml:id=\"token-WDD17/982/72848-p15840\">"+
231 "<span xlink:title=\"lwc/d:--\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">halt</span>"+
232 "</span>"+
233 "</span>"+
234 "</span>"+
235 // "<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
236 "<span xlink:type=\"join\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">"+
237 " "+
238 "<span xlink:title=\"lwc/d:NK\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15842\">den</span>"+
239 " "+
240 "<span xml:id=\"token-WDD17/982/72848-p15842\">"+
241 "<span xlink:title=\"lwc/d:OA\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15843\">Ball</span>"+
242 "</span>"+
243 " "+
244 "<span xml:id=\"token-WDD17/982/72848-p15843\">"+
245 "<span xlink:title=\"lwc/d:PD\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15840\">flach</span>"+
246 "</span>"+
247 ", "+
248 "<mark>"+
249 "<span xlink:title=\"lwc/d:MO\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15845\">ganz</span>"+
250 " "+
251 "<span xml:id=\"token-WDD17/982/72848-p15845\">"+
252 "<span xlink:title=\"lwc/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-WDD17/982/72848-p15843\">flach</span>"+
253 "</span>"+
254 "</mark>"+
255 "</span>"+
256 "</span>"+
257 "<span class=\"context-right\"></span>";
258
259
260// xlink conformant
261relSnippet3 =
262 "<span class=\"context-left\"></span>"+
263 "<span class=\"match\">"+
264 "<span xml:id=\"token-WDD17/982/72848-p15836-15839\">"+
265 "<span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15838\">Ein</span>"+
266 " "+
267 "<span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15838\">letztes</span>"+
268 " "+
269 "<span xml:id=\"token-WDD17/982/72848-p15838\">"+
270 "<span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15836-15839\">mal</span>"+
271 "</span>"+
272 ": "+
273 "<span xml:id=\"token-WDD17/982/72848-p15839-15840\">"+
274 "<span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">AL</span>"+
275 "</span>"+
276 "</span>"+
277 "<span xlink:show=\"other\" data-action=\"join\" xlink:href=\"#token-WDD17/982/72848-p15839-15840\">"+
278 ":"+
279 "<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
280 "<span xml:id=\"token-WDD17/982/72848-p15840\">"+
281 "<span xlink:title=\"lwc/d:--\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">halt</span>"+
282 "</span>"+
283 "</span>"+
284 "</span>"+
285 // "<span xml:id=\"token-WDD17/982/72848-p15840-15846\">"+
286 "<span xlink:show=\"other\" data-action=\"join\" xlink:href=\"#token-WDD17/982/72848-p15840-15846\">"+
287 " "+
288 "<span xlink:title=\"lwc/d:NK\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15842\">den</span>"+
289 " "+
290 "<span xml:id=\"token-WDD17/982/72848-p15842\">"+
291 "<span xlink:title=\"lwc/d:OA\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15843\">Ball</span>"+
292 "</span>"+
293 " "+
294 "<span xml:id=\"token-WDD17/982/72848-p15843\">"+
295 "<span xlink:title=\"lwc/d:PD\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15840\">flach</span>"+
296 "</span>"+
297 ", "+
298 "<mark>"+
299 "<span xlink:title=\"lwc/d:MO\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15845\">ganz</span>"+
300 " "+
301 "<span xml:id=\"token-WDD17/982/72848-p15845\">"+
302 "<span xlink:title=\"lwc/d:CJ\" xlink:show=\"none\" xlink:href=\"#token-WDD17/982/72848-p15843\">flach</span>"+
303 "</span>"+
304 "</mark>"+
305 "</span>"+
306 "</span>"+
307 "<span class=\"context-right\"></span>";
Akronfe4c1b42018-01-30 18:48:09 +0100[diff] [blame]308
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]309requirejs.config({
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]310 baseUrl: '../js/src',
311 paths : {
312 'lib': '../lib'
313 }
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]314});
315
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]316require(['match/relations', 'match/tree'], function (relClass, treeClass) {
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]317 var rel = relClass.create();
Akron3a4a08e2017-05-23 22:34:18 +0200[diff] [blame]318
319 /*
320 * Start and end may be spans, i.e. arrays
321 */
322
323 rel
324 .addToken("Der")
325 .addToken("alte")
326 .addToken("Mann")
327 .addToken("ging")
328 .addToken("über")
329 .addToken("die")
330 .addToken("breite")
331 .addToken("nasse")
332 .addToken("Straße")
333 ;
334
335 rel
Akron65d31082017-09-08 16:23:40 +0200[diff] [blame]336 .addRel({ start: 0, end: 1, label: "a", direction: "uni"})
337 .addRel({ start: 0, end: 1, label: "b", direction: "uni" })
Akron3a4a08e2017-05-23 22:34:18 +0200[diff] [blame]338 .addRel({ start: 1, end: 2, label: "c", direction: "bi" })
Akron65d31082017-09-08 16:23:40 +0200[diff] [blame]339 .addRel({ start: 0, end: 2, label: "dreizehn", direction: "uni" })
340 .addRel({ start: [2,4], end: 5, label: "e", direction: "uni" })
Akron6f1302b2017-09-13 12:46:02 +0200[diff] [blame]341 .addRel({ start: [5,6], end: 7, direction: "uni" })
Akron3a4a08e2017-05-23 22:34:18 +0200[diff] [blame]342 .addRel({ start: 4, end: [6,8], label: "f", direction: "bi" })
Akronfee0b622017-09-13 14:46:43 +0200[diff] [blame]343 .addRel({ start: 8, end: 8, label: "self", direction: "uni"})
Akron3a4a08e2017-05-23 22:34:18 +0200[diff] [blame]344 ;
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]345
346 document.getElementById("treeRel").appendChild(rel.element());
347
348 // Todo: Probably rename to rel.draw()
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]349 rel.show();
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]350
Akron671fdb92017-09-12 18:09:46 +0200[diff] [blame]351 var rel2 = relClass.create(relSnippet);
352 document.getElementById("treeRel2").appendChild(rel2.element());
353 rel2.show();
354
Akronfe4c1b42018-01-30 18:48:09 +0100[diff] [blame]355 var rel3 = relClass.create(relSnippet3);
356 document.getElementById("treeRel3").appendChild(rel3.element());
357 rel3.show();
358
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]359 var tree = treeClass.create(treeSnippet);
360 document.getElementById("treeHier").appendChild(tree.element());
Akronf5dc5102017-05-16 20:32:57 +0200[diff] [blame]361});
Akron15175132017-09-07 18:12:55 +0200[diff] [blame]362