Commit 138beb67 authored by Thibault Ehrhart's avatar Thibault Ehrhart

Improve annotations highlighting code

parent 35ebbb9c
......@@ -42,7 +42,7 @@
<li class="infobox-item" *ngIf="selectedItem.p3090"><b>Flight number:</b> {{ selectedItem.p3090 }}</li>
</ul>
</div>
<div class="text" *ngIf="selectedItem.description" [innerHTML]="selectedItem.description | colorize : selectedItem.annotations | highlight : search.searchParams.keywords | underline : selectedItem.sources"></div>
<div class="text" *ngIf="selectedItem.description" [innerHTML]="selectedItem.description | underline : selectedItem.sources | colorize : (selectedItem.annotations || [])"></div>
</div>
</div>
</div>
......@@ -8,10 +8,33 @@ export class ColorizePipe implements PipeTransform {
constructor(public sanitizer: DomSanitizer) {
}
calculateAdelOffset(htmlText: string, start: number, end: number) {
// Adel is based on stripped html text
var pattern = /<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/g;
var match = pattern.exec(htmlText);
var totalTagsLength = 0;
while (match != null) {
if (match.index > start + totalTagsLength) {
break;
}
console.log(match[0], match.index);
totalTagsLength += match[0].length;
if (match[0].indexOf('</') === 0) {
totalTagsLength -= 1; // Adel Annotator adds a space after closing tags
}
match = pattern.exec(htmlText)
}
return {
start: start + totalTagsLength,
end: end + totalTagsLength
};
}
transform(text: string, annotations: any): SafeHtml {
if (annotations.length > 0) {
var indexOffset = 0;
var strippedText = String(text).replace(/<[^>]+>/gm, '');
// Create a flat array of annotations
var flatAnnotations:Array<any> = [];
......@@ -27,14 +50,20 @@ export class ColorizePipe implements PipeTransform {
return a.start > b.start ? 1 : -1;
});
console.log(flatAnnotations);
flatAnnotations.forEach((value: any) => {
var colorType = NewsService.getAnnotationColor(value.type);
var replacement = '<span class="colorize color-' + colorType + '">' + strippedText.substr(value.start + indexOffset, value.end - value.start) + '</span>';
strippedText = strippedText.substr(0, value.start + indexOffset) + replacement + strippedText.substr(value.end + indexOffset);
indexOffset += replacement.length - strippedText.substr(value.start + indexOffset, value.end - value.start).length;
var adelOffset = this.calculateAdelOffset(text, value.start, value.end);
console.log('"' + text.substr(adelOffset.start, adelOffset.end - adelOffset.start) + '"');
let replacement = '<span asrael class="colorize color-' + colorType + '">' + text.substr(adelOffset.start, adelOffset.end - adelOffset.start) + '</span>';
text = text.substr(0, adelOffset.start) + replacement + text.substr(adelOffset.end);
});
return strippedText;
return text;
} else {
return text;
}
......
......@@ -7,12 +7,57 @@ export class UnderlinePipe implements PipeTransform {
constructor(public sanitizer: DomSanitizer) {
}
transform(text: string, searchArray: any): SafeHtml {
if (searchArray && text) {
searchArray.forEach((search: string) => {
let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
const regex = new RegExp(pattern, 'gi');
text = text.replace(regex, (match) => `<span class="underline">${match}</span>`);
calculateLimsiOffset(htmlText: string, start: number, end: number) {
// Limsi is based on text between <p></p> only
var pattern = /<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/g;
var match = pattern.exec(htmlText);
var totalTagsLength = 0;
var previousIndex = 0;
var previousTag = null;
while (match != null) {
if (match.index > start + totalTagsLength) {
break;
}
totalTagsLength += match[0].length;
if (match[0] === '</p>') {
totalTagsLength -= 1; // Limsi-Extractor adds a space after </p>
}
if (match[0] === '</p>' && previousTag === '<p>' && match.index - previousIndex === previousTag.length) {
totalTagsLength += 1; // Empty paragraphs (<p></p>) do not have an extra space
}
if (match[0] !== '</p>' && match[0].indexOf('<span asrael') === -1 && match[0] !== '</span>' && previousTag) {
totalTagsLength += (match.index - previousIndex) - previousTag.length;
}
previousTag = match[0];
previousIndex = match.index;
match = pattern.exec(htmlText)
}
return {
start: start + totalTagsLength,
end: end + totalTagsLength
};
}
transform(text: string, sentencesArray: any): SafeHtml {
if (sentencesArray && text) {
sentencesArray.forEach((sentence: any) => {
if (sentence.sources) {
sentence.sources.forEach((source: any) => {
let tooltip = source.value ? source.value.replace(/[\u00A0-\u9999<>\&]/gim, (i: string) => {
return '&#' + i.charCodeAt(0) + ';';
}) : '';
var limsiOffset = this.calculateLimsiOffset(text, source.start, source.end);
let replacement = `<span asrael class="highlight ` + (source.type === 'SOURCE-PRIM' ? 'primary' : 'secondary') + `"` + (source.value ? ` title="${tooltip}"` : ``) + `>` + text.substr(limsiOffset.start, limsiOffset.end - limsiOffset.start) + `</span>`;
//console.log(limsiOffset);
//console.log(text);
//console.log(text.substr(limsiOffset.start, limsiOffset.end - limsiOffset.start));
text = text.substr(0, limsiOffset.start) + replacement + text.substr(limsiOffset.end);
});
}
});
return text;
} else {
......
......@@ -242,6 +242,21 @@ form {
border-radius: 2px;
}
.highlight {
padding: 0.25em;
box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.25);
line-height: 2;
border-radius: 2px;
&.primary {
background-color: #17a2b8;
color: #fff;
}
&.secondary {
background-color: #6c757d;
color: #fff;
}
}
.underline {
text-decoration: underline;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment