Closes #14

package.json

@@ -46,6 +46,7 @@
     "@recogito/recogito-client-core": "^1.6.0",
     "@svgdotjs/svg.js": "^3.1.1",
     "perfect-arrows": "^0.3.7",
-    "tiny-emitter": "^2.1.0"
+    "tiny-emitter": "^2.1.0",
+    "uuid": "^9.0.0"
   }
 }

public/annotations.w3c.json

@@ -101,8 +101,13 @@
   {
     "@context": "http://www.w3.org/ns/anno.jsonld",
     "type": "Annotation",
-    "id": "#570a0a77-28d2-4c05-ab5f-5a098df52f5e",
-    "body": [],
+    "id": "#relation-1",
+    "body": [{
+      "type": "TextualBody",
+      "value": "MyTag",
+      "purpose": "tagging"
+    }],
+    "motivation": "linking",
     "target": [
       {
         "id": "#1"

public/index.html

@@ -78,7 +78,7 @@ <h1>Homer: The Odyssey</h1>
           console.log('deleted', c);
         });
 
-        // r.loadAnnotations('annotations.w3c.json');
+        r.loadAnnotations('annotations.w3c.json');
       };
     </script>
   </body>

src/NetworkCanvas.js

@@ -1,5 +1,6 @@
 import { SVG } from '@svgdotjs/svg.js';
 import EventEmitter from 'tiny-emitter';
+import { v4 as uuid } from 'uuid';
 
 import NetworkEdge from './NetworkEdge';
 import NetworkNode from './NetworkNode';
@@ -144,7 +145,9 @@ export default class NetworkCanvas extends EventEmitter {
   onCompleteConnection = () => {
     const { start, end } = this.currentFloatingEdge;
 
-    const edge = new NetworkEdge(start, end);
+    const id = `#${uuid()}`;
+
+    const edge = new NetworkEdge(id, start, end);
 
     const annotation = edge.toAnnotation();
 
@@ -236,7 +239,7 @@ export default class NetworkCanvas extends EventEmitter {
   setAnnotations = annotations => annotations.forEach(a => {
     const start = NetworkNode.findById(a.targets[0].id);
     const end = NetworkNode.findById(a.targets[1].id);
-    this.addEdge(new NetworkEdge(start, end));
+    this.addEdge(new NetworkEdge(a.id, start, end));
   });
 
   unregisterInstance = instance => 

src/NetworkEdge.js

@@ -2,7 +2,9 @@ import WebAnnotation from '@recogito/recogito-client-core/src/WebAnnotation';
 
 export default class NetworkEdge {
 
-  constructor(start, end) {
+  constructor(id, start, end) {
+    this.id = id;
+
     this.start = start;
     this.end = end;
 
@@ -20,6 +22,7 @@ export default class NetworkEdge {
   }
 
   toAnnotation = () => WebAnnotation.create({
+    id: this.id,
     body: this.bodies,
     motivation: 'linking',
     target: [