Text Annotations

In the text annotation, we will use Recogito library. Here is an explanation for it:

 Annotations are created by selecting specific text portions within the post content. When an annotation is created, it captures details like the 
 selected text, annotation body (comment or description), and a reference to the target content.
 Each text annotation has an associated ID (item.id) and contains information about the selected text (exact) and its position (start and end) within 
 the text content.

I found an example code for Javascript from the previous years:

useEffect(() => {
const postTextAnnotation = async () => {
  const r = new Recogito({
    content: document.getElementById("post-content-text" + postId),
    widgets: [ 'COMMENT' ]
  });
  r.on('createAnnotation', function (propsTextAnnotation) {
    setTextAnnotation(propsTextAnnotation);
  });
  let data = {
    '@context': "http://www.w3.org/ns/anno.jsonld",
     type: "Annotation",
     body: textAnnotation.body[0].value,
     target: {
       source: 'http://3.76.176.35/' + lsid + '/' + postId,
       selector: textAnnotation.target.selector[1],
     }
   };
   console.log(data);
   await fetch(`${process.env.REACT_APP_BACKEND_BASE_URL}annotations-service/create/${lsid}/${postId}`, {
     method: "POST",
     body: JSON.stringify(data),
     headers: {
         'Content-type': 'application/json; charset=UTF-8',
         'Authorization': `${token}` ,
     },
 })
     .then((response) => {
         if (response.status === 200) {
             console.log("successfull")
             setMessage("Vote added successfully");
         }
     })
     .catch((error) => {
         console.error("Error:", error);
     });
};
postTextAnnotation();
 }, [textAnnotation]);

Image Annotation

For the image annotation, we will use **Annotorious ** library. Here is an explanation for it:

Annotations are created by selecting regions or points within the displayed image. These annotations capture details such as the annotation body 
(comment or description), image source, and a selector (region or point) within the image.
Each image annotation has an associated ID (item.id) and contains information about the image source (source), the type of selector used (e.g., 
FragmentSelector), and its value, which might represent a specific region within the image.

Here is an example code I found from previous year:

const [imageAnnotation, setImageAnnotation] = useState();
 useEffect (() => {
const postImageAnnotation = async () => {
  const a = new Annotorious({
    image: document.getElementById("post-content-image" + postId),
    widgets: [ 'COMMENT' ],
    readOnly: false
  });
  a.on('createAnnotation', function(propsImageAnnotation) {
    setImageAnnotation(propsImageAnnotation);
  });
  let data = {
    '@context': "http://www.w3.org/ns/anno.jsonld",
    type: "Annotation",
    body: imageAnnotation.body[0].value,
    target: {
      source: 'http://3.76.176.35/' + lsid + '/' + postId,
      selector: null,
      type: "Image",
      id: images + "#" + imageAnnotation.target.selector.value,
      format: "image/jpeg"
    }
  };
  console.log(data);
  await fetch(`${process.env.REACT_APP_BACKEND_BASE_URL}annotations-service/create/${lsid}/${postId}`, {
    method: "POST",
    body: JSON.stringify(data),
    headers: {
        'Content-type': 'application/json; charset=UTF-8',
        'Authorization': `${token}` ,
    },
  })
    .then((response) => {
        if (response.status === 200) {
            console.log("successfull")
            setMessage("Vote added successfully");
        }
    })
    .catch((error) => {
        console.error("Error:", error);
    });
};
postImageAnnotation();
 }, [imageAnnotation])

Annotation Storage and Retrieval:

• Annotations, once created, are sent to a backend server for storage using API calls (POST requests). The data of each annotation (text or image) is structured in a specific format, typically adhering to standards like the Web Annotation Data Model (@context, type, body, target, etc.).
• The annotations are stored with references to the specific post (lsid and postId) to which they belong. These references are used to retrieve and display annotations when rendering the post.

Retrieving Annotations:

• When the post component mounts (useEffect), API requests (GET requests) are made to fetch existing annotations associated with the current post (lsid and postId) from the server.
• Retrieved annotations are then added back to the respective text or image elements using the Recogito or Annotorious libraries to display previously created annotations for that post.

Annotation IDs:

Annotation IDs (item.id) are used to uniquely identify individual annotations. These IDs are crucial for managing, updating, or deleting specific annotations.