From ba566c15b6e3c68e5041bb62df07e41fb07357ba Mon Sep 17 00:00:00 2001 From: Zdenek Kasner Date: Tue, 3 Dec 2024 20:12:06 +0100 Subject: [PATCH 1/2] Add missing colors --- factgenie/datasets/propaganda_techniques.py | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/factgenie/datasets/propaganda_techniques.py b/factgenie/datasets/propaganda_techniques.py index f2c55f7..b3d7b60 100644 --- a/factgenie/datasets/propaganda_techniques.py +++ b/factgenie/datasets/propaganda_techniques.py @@ -39,6 +39,8 @@ "#8f0e42", # Dark Pink "#095700", # Dark Green "#FFD700", # Gold + "#FF4500", # Orange Red + "#8B4513", # Saddle Brown ] @@ -270,6 +272,7 @@ def download( short_categories = [{"name": c["name"], "color": c["color"], "description": ""} for c in PCT_span_categories] categories_names = [c["name"] for c in short_categories] + # save outputs outputs_jsonl_parent = out_download_dir / dataset_id outputs_jsonl_parent.mkdir(parents=True, exist_ok=True) @@ -360,7 +363,8 @@ def _load_example_annotations( try: type_idx = categories_names.index(category) except ValueError: - __import__("ipdb").set_trace() + logger.warning(f"Category {category} not found in categories_names") + continue annotation_d = { "reason": "", From a3b9e3eaed7685f89c381985858eb2fc1cb569c6 Mon Sep 17 00:00:00 2001 From: Zdenek Kasner Date: Thu, 5 Dec 2024 15:49:44 +0100 Subject: [PATCH 2/2] Add annotation badges and an option to switch them --- factgenie/static/js/browse.js | 42 ++++++++++++++++++++++----- factgenie/templates/pages/browse.html | 15 ++++++---- 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/factgenie/static/js/browse.js b/factgenie/static/js/browse.js index 61473d2..0452f9e 100644 --- a/factgenie/static/js/browse.js +++ b/factgenie/static/js/browse.js @@ -180,6 +180,8 @@ function fetchExample(dataset, split, example_idx) { total_examples = datasets[dataset].example_count[split]; $("#total-examples").html(total_examples - 1); + window.generated_outputs = data.generated_outputs; + createOutputBoxes(data.generated_outputs, window.highlight_setup_id); showSelectedCampaigns(); updateDisplayedAnnotations(); @@ -301,10 +303,12 @@ function highlightContent(content, annotations, annotation_span_categories) { let offset = 0; let activeAnnotations = []; let lastStart = 0; + const displayBadge = $("#badgesSwitch").is(":checked"); boundaries.forEach(boundary => { const pos = boundary.pos + offset; const ann = boundary.annotation; + var offsetShift = 0; if (boundary.type === 'start') { // Close all active annotations at this position if needed @@ -317,7 +321,7 @@ function highlightContent(content, annotations, annotation_span_categories) { // Restart all spans let spanOpening = ''; activeAnnotations.forEach((active, index) => { - spanOpening += createSpanOpening(active, index + 1, annotation_span_categories); + spanOpening += createSpanOpening(active, index + 1, annotation_span_categories, displayBadge, true); }); html = html.slice(0, pos + offsetShift) + spanOpening + html.slice(pos + offsetShift); offset += spanOpening.length; @@ -325,8 +329,8 @@ function highlightContent(content, annotations, annotation_span_categories) { // Add new annotation activeAnnotations.push(ann); const level = activeAnnotations.length; - const spanOpening = createSpanOpening(ann, level, annotation_span_categories); - html = html.slice(0, pos) + spanOpening + html.slice(pos); + const spanOpening = createSpanOpening(ann, level, annotation_span_categories, displayBadge, false); + html = html.slice(0, pos + offsetShift) + spanOpening + html.slice(pos + offsetShift); offset += spanOpening.length; lastStart = boundary.pos; } else { @@ -341,18 +345,36 @@ function highlightContent(content, annotations, annotation_span_categories) { return html; } -function createSpanOpening(annotation, level, annotation_span_categories) { +function createSpanOpening(annotation, level, annotation_span_categories, displayBadge, isContinuation) { const color = annotation_span_categories[annotation.type].color; const error_name = annotation_span_categories[annotation.type].name; + const initial = error_name.charAt(0).toUpperCase(); const note = annotation.reason || annotation.note; const tooltip_text = note ? `${error_name} (${note})` : error_name; - const lineThickness = 7; const lineHeight = 20; + const lineThickness = 6; const paddingBottom = 3 + (lineThickness - 1) * (level-1); + const paddingBottomBadge = 4 + (lineThickness - 1) * (level-1); + + if (displayBadge) { + // we display the tooltip on the badge + const badgeStyle = `background-color: ${color}; border-radius: 1px; font-size: 12px; color: #272727; font-weight: bold; padding: 3px 7px ${paddingBottomBadge}px 7px; margin-right: 0px;`; + const badgeSpan = `${initial}`; - style=`background: linear-gradient(0deg, ${color} ${lineThickness}px, white 1px, transparent 1px); background-position: 0 100%; line-height: ${lineHeight}px; padding-bottom: ${paddingBottom}px;`; + const lineStyle = `position: relative; background: linear-gradient(0deg, ${color} ${lineThickness}px, white 0px, transparent 0px); background-position: 0 100%; line-height: ${lineHeight}px; padding-bottom: ${paddingBottom}px; padding-left: 3px;`; + const spanOpening = ``; - return ``; + if (isContinuation) { + return `${spanOpening}`; + } else { + return `${badgeSpan}${spanOpening}`; + } + } else { + const lineStyle = `position: relative; background: linear-gradient(0deg, ${color} ${lineThickness}px, white 0px, transparent 0px); background-position: 0 100%; line-height: ${lineHeight}px; padding-bottom: ${paddingBottom}px; `; + const spanOpening = ``; + + return spanOpening; + } } function showRawData(data) { @@ -419,6 +441,12 @@ $('#page-input').keypress(function (event) { $("#dataset-select").on("change", changeDataset); $("#split-select").on("change", changeSplit); +$("#badgesSwitch").on("change", function () { + createOutputBoxes(window.generated_outputs, window.highlight_setup_id); + showSelectedCampaigns(); + updateDisplayedAnnotations(); +}); + $(document).keydown(function (event) { const key = event.key; diff --git a/factgenie/templates/pages/browse.html b/factgenie/templates/pages/browse.html index ae8e8e4..75b86ca 100755 --- a/factgenie/templates/pages/browse.html +++ b/factgenie/templates/pages/browse.html @@ -120,12 +120,17 @@