Annotation UI: Research - bounswe/bounswe2023group4 GitHub Wiki

Introduction

Implementing the annotation UI proved to be a tricky issue to tackle. During the implementation, I had to investigate a multitude of technologies that might facilitate and expedite the implementation of this functionality in the Front End.

Text Highlighting:

Highlighting text can be performed in multiple ways. While the mark component in HTML can be used to highlight the text that it surrounds, adjusting the CSS properties of the component so that the background is colored can be utilized as an alternative approach. The main challenge lies in the dynamic nature of our UI implementation. Even with few text excerpts to annotate, the combinations are incalculable. A new approach emerged in the form of highlighting libraries such as react-highlight-words. Unfortunately, their use was infeasible since users might elect to annotate parts of words. For instance, the award word in the composite word "award-winning" might be annotated separately to clarify the award's title or significance. Another approach was manipulating the HTML content of the components that incorporate the dynamic text. Although it's not a preferred method in react, it proved to be the only doable solution. Thanks to the comprehensive string manipulation capabilities that javascript features, manipulating the HTML and extracting the context of the annotated text became more viable.

Context Menus:

It is a menu that appears when a user right-clicks on the screen. It allows greater flexibility since the menu items can trigger multiple functionalities at the user's will. It can be implemented using the Dropdown component featured in the Antd library. The implementation includes 3 functionalities: Display All Annotations, Display My Annotations, and Hide Annotations.

Modals:

A Modal is a large interface that covers the majority of the screen. It used to accommodate the UI interface that couldn't be included in the page design. Modals were considered initially for the implementation of the functionalities in the Context Menu. Thanks to Modals, we could annotate and display other users' annotations independent of the current page's address. Nevertheless, it was problematic since an annotation ought to be fixed to a certain page. Hence, we decided to allow the user to annotate the polls on the Vote page only since other users' annotations might help clarify poorly explained parts of the question and the choices. Additionally, sufficient space was available at our disposal. Modals were initially implemented using the Modal component featured in the Antd library.

Popover:

A popover is a small variant of the pop-up component that's stimulated by the user's interactions with the interface such as clicking and hovering and appears close to the location of the trigger. A popover features a small interface that can suffice for functionalities that don't demand much UI space. A popover proved to be an ideal candidate for annotating poll text since the user can select the text he/she wishes to annotate and type in the popover's input box their annotation. Popovers were implemented using the Popover component featured in the Antd library.

Image Annotation:

In order to annotate an image, we ought to be able to select regions to enable flexible annotation demarcation. I am satisfied that through my experimentation in the branch image-annotation-tentative-implementation, we have to use canvas-wrapped image components such that the selected region's dimensions are determined and stored. When the corresponding annotation is retrieved and pressed on, the region will be highlighted with an overlaying yellow border. One drawback is that, as far as I am aware, the dimensions and coordinates are absolute so this might cause future problems though they might be solved if we modify our dimensional hierarchy. This is an example from the experimental implementation: