security_vision/chronodiagram
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feature: comment on annotations

Browse source
This commit is contained in:
Ruben van de Ven 2022-05-25 10:04:55 +02:00
parent eb6d31742e
commit 7e946cb3f6
2 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/www/annotate.html
View file

@ -199,6 +199,14 @@
pointer-events: all; pointer-events: all;
} }
.controls .annotation-comment{
width: 100%;
visibility: hidden;
}
.selected-annotation .controls .annotation-comment{
visibility: visible;
}
.noUi-handle:focus { .noUi-handle:focus {
/* background: red;; */ /* background: red;; */
border: solid 2px #601be0; border: solid 2px #601be0;

29
app/www/annotate.js
View file

@ -1,8 +1,9 @@
class Annotation { class Annotation {
constructor(tag, t_in, t_out) { constructor(tag, t_in, t_out, comment) {
this.tag = tag; this.tag = tag;
this.t_in = Number.parseFloat(t_in); this.t_in = Number.parseFloat(t_in);
this.t_out = Number.parseFloat(t_out); this.t_out = Number.parseFloat(t_out);
this.comment = comment;
} }
} }
@ -271,6 +272,24 @@ class Annotator extends EventTarget {
this.controlsEl.appendChild(this.tagsEl); this.controlsEl.appendChild(this.tagsEl);
this.commentEl = document.createElement('input');
this.commentEl.type = 'text';
this.commentEl.classList.add('annotation-comment');
this.commentEl.title = "Add comment to annotation";
this.commentEl.placeholder = "comment";
this.commentEl.value = "";
this.commentEl.addEventListener('keyup', (e) => {
e.stopPropagation(); // prevent keyup event to propagate and set i/o points
});
this.commentEl.addEventListener('input', (e) => {
e.stopPropagation(); // prevent keyup event
if (this.selectedAnnotation) {
this.selectedAnnotation.comment = this.commentEl.value;
this.updateAnnotations(true)
}
});
this.controlsEl.appendChild(this.commentEl);
this.load(fileurl); this.load(fileurl);
}); });
} }
@ -311,7 +330,7 @@ class Annotator extends EventTarget {
if (this.selectedAnnotationI == annotation_i) { if (this.selectedAnnotationI == annotation_i) {
this.annotationEl.classList.add('selected'); this.annotationEl.classList.add('selected');
} }
this.annotationEl.title = annotation.tag; this.annotationEl.title = `[${annotation.tag}] ${annotation.comment}`;
this.annotationEl.addEventListener('mouseover', (e) => { this.annotationEl.addEventListener('mouseover', (e) => {
@ -360,6 +379,7 @@ class Annotator extends EventTarget {
this.updateAnnotations(false); //selects the right tag & highlights the annotation this.updateAnnotations(false); //selects the right tag & highlights the annotation
this.wrapperEl.classList.add('selected-annotation'); this.wrapperEl.classList.add('selected-annotation');
this.commentEl.value = this.selectedAnnotation.comment;
} }
deselectAnnotation(keep_position) { deselectAnnotation(keep_position) {
@ -368,6 +388,7 @@ class Annotator extends EventTarget {
} }
this.wrapperEl.classList.remove('selected-annotation'); this.wrapperEl.classList.remove('selected-annotation');
this.commentEl.value = "";
this.selectedAnnotationI = null; this.selectedAnnotationI = null;
this.selectedAnnotation = null; this.selectedAnnotation = null;
@ -434,7 +455,7 @@ class Annotator extends EventTarget {
.then(response => response.ok ? response.json() : null) .then(response => response.ok ? response.json() : null)
.then(metadata => { .then(metadata => {
if (metadata !== null) { if (metadata !== null) {
metadata.annotations = metadata.annotations.map((a) => new Annotation(a.tag, a.t_in, a.t_out)) metadata.annotations = metadata.annotations.map((a) => new Annotation(a.tag, a.t_in, a.t_out, a.hasOwnProperty('comment') ? a.comment : ""))
} }
this.loadStrokes(data, metadata) this.loadStrokes(data, metadata)
}) })
@ -517,7 +538,7 @@ class Annotator extends EventTarget {
this.slider.destroy(); this.slider.destroy();
} }
this.annotations.push(new Annotation(tag, t_in, t_out)); this.annotations.push(new Annotation(tag, t_in, t_out, ""));
this.updateAnnotations(true); this.updateAnnotations(true);
this._currentTimeMs = t_out; this._currentTimeMs = t_out;