[Everyone] Annotate a things a bit.

[Mutti499]

The goal is to implement an annotation feature that allows users to annotate specific sections of a document ( I am thinking about a result page about languages that explains the language) with comments. Users should be able to highlight text and attach comments, and these comments should be stored in the backend for future retrieval. The feature requires updates to the backend models to store annotations, new API endpoints for creating and fetching annotations, and a responsive UI/UX on the frontend for user interaction.

Requirements:

• Update backend models to include an Annotation model that connects comments to highlighted text.
• Implement API endpoints to:
  • Save annotations.
  • Retrieve annotations for a document or section.
  • Delete or update annotations if necessary.
• Frontend should allow users to:
  • Select/highlight text to create annotations.
  • Display annotations next to or within the highlighted text.
  • Provide an intuitive UI for managing annotations.

---

Tasks:

• Backend:

  • [ ] Create an Annotation model:
  • Link annotations to the user, document, and text range.
  • Include a field for the comment associated with the annotation.
  • [ ] Write API views for:
  • Creating annotations.
  • Fetching annotations for a specific document or section.
  • Editing and deleting annotations.
  • [ ] Add appropriate serializers for annotation data.
  • [ ] Test endpoints to ensure correctness.

• Frontend:

  • [ ] Create a UI component for selecting and highlighting text.
  • [ ] Add a form/modal to allow users to attach comments to selected text.
  • [ ] Ensure the UI dynamically displays existing annotations when a document loads.
  • [ ] Send requests to the backend to save, edit, or delete annotations.
  • [ ] Style the annotation feature to make it user-friendly and visually appealing.

Provide a deadline if one is needed

• Deadline: 26/11/2024 LOL
• Estimated Effort: ~3-5 days
• Reviewer: @kristinatrajkovski @halil-karabacak

Before the issue is closed, please remember to test and document the final implementation thoroughly. This is one of our important deliverables for the demo day.

[damlakayikci]

Hey guys, I started working on annotation on the front end and here is what I came up with! Right now you can only create annotations (modification and deletion will be implemented later). I need to work on the details a bit but here is how it looks for now:

[halil-karabacak]

This is the current situation in mobile, users can delete their annotated texts: or add new ones. Their highlighnt color would be different.