Merge branch 'feat/span-questions' of https://github.com/argilla-io/a…

…rgilla into feat/span-questions
argilla-io · Mar 6, 2024 · 4910882 · 4910882
2 parents 3154777 + 7c23f49
commit 4910882
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 24 deletions.
diff --git a/.../components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue b/.../components/feedback-task/container/fields/span-annotation/components/EntityComponent.vue
@@ -79,25 +79,25 @@ export default {
         position.top + this.$refs.spanEntityRef.scrollTop
       }px`;
     },
-
     getScrollParent(element) {
-      if (!element) {
-        return undefined;
-      }
+      if (!element) return;
 
       let parent = element.parentElement;
       while (parent) {
         const { overflow } = window.getComputedStyle(parent);
         if (overflow.split(" ").every((o) => o === "auto" || o === "scroll")) {
           return parent;
         }
+
         parent = parent.parentElement;
       }
 
       return document.documentElement;
     },
   },
   mounted() {
+    this.scroll = this.getScrollParent(document.getElementById("spanEntity"));
+
     if (this.scroll) {
       this.scroll.addEventListener("scroll", this.getPosition);
     }
@@ -107,9 +107,6 @@ export default {
       this.scroll.removeEventListener("scroll", this.getPosition);
     }
   },
-  created() {
-    this.scroll = this.getScrollParent(document.getElementById("spanEntity"));
-  },
 };
 </script>
 

diff --git a/...tend/components/feedback-task/container/fields/span-annotation/components/highlighting.ts b/...tend/components/feedback-task/container/fields/span-annotation/components/highlighting.ts
@@ -87,6 +87,12 @@ export class Highlighting {
   }
 
   mount(selections: Omit<Span, "text" | "node">[] = []) {
+    if (!CSS.highlights) {
+      throw new Error(
+        "The CSS Custom Highlight API is not supported in this browser!"
+      );
+    }
+
     const node = document.getElementById(this.nodeId)!;
 
     if (!node) throw new Error(`Node with id ${this.nodeId} not found`);
@@ -105,12 +111,6 @@ export class Highlighting {
   }
 
   private loadHighlights(selections: Omit<Span, "text" | "node">[] = []) {
-    if (!CSS.highlights) {
-      throw new Error(
-        "The CSS Custom Highlight API is not supported in this browser!"
-      );
-    }
-
     if (!this.node) {
       throw new Error(
         "Node not attached, use `attachNode` method with HTMLElement that contains the text to select"
@@ -150,18 +150,13 @@ export class Highlighting {
     const nodeParent = node.parentNode;
     nodeParent.appendChild(this.entitySpanContainer.cloneNode(true));
 
-    this.node.addEventListener("mouseup", () => {
+    this.node.addEventListener("click", () => {
       this.highlightUserSelection();
 
       this.applyStyles();
     });
 
-    new ResizeObserver(() => updateStyles()).observe(node);
-
-    const updateStyles = () => {
-      this.applyEntityStyle();
-      this.applyStylesOnScroll();
-    };
+    new ResizeObserver(() => this.applyStyles()).observe(node);
 
     this.applyStylesOnScroll();
   }

diff --git a/frontend/components/feedback-task/container/questions/form/span/SpanComponent.vue b/frontend/components/feedback-task/container/questions/form/span/SpanComponent.vue
@@ -10,10 +10,6 @@
       @on-focus="onFocus"
       @on-selected="onSelected"
     />
-    <div>
-      <p>Values</p>
-      {{ JSON.stringify(question.answer.valuesAnswered) }}
-    </div>
   </div>
 </template>