Checkpoint 5

js-src/SvgArrow.ts

@@ -0,0 +1,82 @@
+
+
+class SvgArrow {
+	static yArrows: number = 0;
+	
+	container: HTMLElement;
+	markFrom: HTMLElement;
+	markTo:   HTMLElement;
+	score: number;
+	classNames: string[] = [];
+	constructor(container: HTMLElement, markFrom: HTMLElement, markTo: HTMLElement, score: number) {
+		this.container = container;
+		this.markFrom = markFrom;
+		this.markTo   = markTo;
+		this.score    = score;
+	}
+	
+	/// From displacy.js
+	_el(tag, options): SVGElement {
+		const { classnames = [], attributes = [], style = [], children = [], text, id, xlink } = options;
+		const ns = 'http://www.w3.org/2000/svg';
+		const nsx = 'http://www.w3.org/1999/xlink';
+		const el = document.createElementNS(ns, tag);
+
+		classnames.forEach(name => el.classList.add(name));
+		attributes.forEach(([attr, value]) => el.setAttribute(attr, value));
+		style.forEach(([ prop, value ]) => el.style[prop] = value);
+		if(xlink) el.setAttributeNS(nsx, 'xlink:href', xlink);
+		if(text) el.appendChild(document.createTextNode(text));
+		if(id) el.id = id;
+		children.forEach(child => el.appendChild(child));
+		return el;
+	}
+	
+	
+	generate(): SVGElement {
+		const rand = Math.random().toString(36).substr(2, 8);
+		
+		const startX = this.markTo.getBoundingClientRect().left 
+			- this.container.getBoundingClientRect().left
+			+ this.markTo.getBoundingClientRect().width / 2;
+		
+		const endX = this.markFrom.getBoundingClientRect().left 
+			- this.container.getBoundingClientRect().left
+			+ this.markFrom.getBoundingClientRect().width / 2;
+		
+		const curveY = Math.max(-50, SvgArrow.yArrows - (endX - startX) / 3.2);
+		
+		return this._el('g', {
+			classnames: [ 'displacy-arrow' ].concat(this.classNames),
+			children: [
+				this._el('path', {
+					id: `arrow-${rand}`,
+					classnames: [ 'displacy-arc' ],
+					attributes: [
+						[ 'd', `M${startX},${SvgArrow.yArrows} C${startX},${curveY} ${endX},${curveY} ${endX},${SvgArrow.yArrows}`],
+						[ 'stroke-width', '2px' ],
+						[ 'fill', 'none' ],
+						[ 'stroke', 'currentColor' ],
+					]
+				}),
+				this._el('text', {
+					attributes: [
+						[ 'dy', '1em' ]
+					],
+					children: [
+						this._el('textPath', {
+							xlink: `#arrow-${rand}`,
+							classnames: [ 'displacy-label' ],
+							attributes: [
+								[ 'startOffset', '50%' ],
+								[ 'fill', 'currentColor' ],
+								[ 'text-anchor', 'middle' ],
+							],
+							text: this.score.toFixed(2)
+						})
+					]
+				}),
+			]
+		});
+	}
+}

js-src/coref.ts

@@ -82,9 +82,42 @@ class Coref {
 		
 		this.container.innerHTML = `<div class="text">${markup}</div>`;
 		/// SVG
+		this.svgContainer.textContent = "";  // Empty
 		this.svgResize();
-		// this.svgContainer.width = this.container
-		window.container = this.container;
-		window.svgContainer = this.svgContainer;
+		(<any>window).container = this.container;
+		(<any>window).svgContainer = this.svgContainer;
+		/**
+		 * Arrows preparation
+		 */
+		const endY = document.querySelector('.container .text')!.getBoundingClientRect().top 
+			- this.container.getBoundingClientRect().top
+			- 2;
+		SvgArrow.yArrows = endY;
+		/**
+		 * Render arrows
+		 */
+		for (const [__from, scores] of Object.entries(res.pairScores)) {
+			const from = parseInt(__from, 10);   /// Convert all string keys to ints...
+			for (const [__to, score] of Object.entries(scores)) {
+				const to = parseInt(__to, 10);
+				
+				// Positions:
+				const markFrom = document.querySelector(`mark[data-index="${from}"]`) as HTMLElement;
+				const markTo   = document.querySelector(`mark[data-index="${to}"]`) as HTMLElement;
+				// console.log(markFrom, markTo, score);  // todo remove
+				const arrow = new SvgArrow(this.container, markFrom, markTo, score);
+				// Is this a resolved coref?
+				if (score >= Math.max(...Object.values(scores))) {
+					arrow.classNames.push('score-ok');  // Best pairwise score
+					// Is it the better than the singleScore?
+					const singleScore = res.singleScores[from];
+					if (singleScore && score >= singleScore) {
+						arrow.classNames.push('score-best');
+					}
+				}
+				
+				this.svgContainer.appendChild(arrow.generate());
+			}
+		}
 	}
 }

less/style.less

@@ -92,7 +92,7 @@ code, pre {
 .container {
 	font-size: 20px;
 	white-space: nowrap;
-	padding: 180px 40px;
+	padding: 300px 40px 200px 40px;   /// Keep a large-ish bottom padding b/c we use it to scroll the whole container.
 	mark {
 		position: relative;
 		span.single-score {
@@ -122,7 +122,34 @@ body.debug {
 	position: absolute;
 	top: 0; left: 0; right: 0; bottom: 0;
 	z-index: -1;
-	background-color: pink;
+	// background-color: pink;
+}
+
+
+/**
+ * Arrows
+ */
+
+.displacy-arrow {
+	color: #cad2cd; // #87908a;
+	visibility: hidden;
+	.displacy-label {
+		font-family: @fontMonospace;
+		font-size: 12px;
+	}
+	&.score-ok {
+		color: #ff9378;
+	}
+	&.score-best {
+		color: #ff211d;
+		visibility: visible;
+	}
+}
+
+body.debug {
+	.displacy-arrow {
+		visibility: visible !important;
+	}
 }
 
 /**