Add enum for discussion elements and replace tooltip with own functions

src/js/discussionElements.js

+export const elements = {
+    ISSUE: "Issue",
+    STATEMENT: "Statement",
+    ARGUMENT: "Argument",
+    SUPPORT: "Support",
+    ATTACK: "Attack",
+    REGARDING: "REGARDING",
+    CONCLUDES: "CONCLUDES",
+    PREMISEOF: "PREMISE_OF"
+};
\ No newline at end of file

src/js/graph/graphCreator.js

 import {Neo4JAdapter} from '../neo4j/neo'
 import {v1 as neo4j} from 'neo4j-driver'
+import {elements} from '../discussionElements'
 
 export class GraphCreator {
 
@@ -11,19 +12,19 @@ export class GraphCreator {
                 if (element instanceof neo4j.types.Node) {
                     var id = element.identity.toInt();
                     var newNode = null;
-                    if (element.labels.includes("Issue")){
+                    if (element.labels.includes(elements.ISSUE)){
                         newNode = {
                             "id": id,
                             "labels": element.labels,
                             "title": element.properties.title
                         };
-                    }else if (element.labels.includes("Statement")){
+                    }else if (element.labels.includes(elements.STATEMENT)){
                         newNode = {
                             "id": id,
                             "labels": element.labels,
                             "textversion": element.properties.textversion
                         };
-                    }else if (element.labels.includes("Argument")){
+                    }else if (element.labels.includes(elements.ARGUMENT)){
                         newNode = {
                             "id": id,
                             "labels": element.labels

src/js/visualizer/tooltip/tooltip.js

+export function getIssueTooltipOf(element) {
+    return "<p\>id:" + element.id
+        + "<p/>Labels:" + element.labels
+        + "<p/>Title:" + element.title;
+}
+
+export function getStatementTooltipOf(element) {
+    return "<div class='card'>"
+        + "<img src='https://www.w3schools.com/w3images/avatar2.png' width='80' height='80'/>"
+        + "<div class='container'>"
+        + "<h4><b>John Doe</b></h4>"
+        + "<p>id:" + element.id
+        + "<p/>Labels:" + element.labels
+        + "<p/>Textversion:" + element.textversion;
+}
+
+export function getArgumentTooltipOf(element) {
+    return "<p\>id:" + element.id
+        + "<p/>Labels:" + element.labels;
+}
+
+export function getEdgeTooltipOf(element) {
+    return "<p\>Source:" + element.source.id +
+        "<p/>Target:" + element.target.id +
+        "<p/>Type:" + element.type;
+}
\ No newline at end of file

src/js/visualizer/visualization.js

@@ -3,6 +3,8 @@ import {Neo4JAdapter} from '../neo4j/neo'
 import {Graph} from '../graph/graph'
 import {GraphCreator} from '../graph/graphCreator'
 import {v1 as neo4j} from 'neo4j-driver'
+import {elements} from '../discussionElements'
+import {getIssueTooltipOf, getStatementTooltipOf, getArgumentTooltipOf, getEdgeTooltipOf} from './tooltip/tooltip'
 
 export class Network {
     async showNetwork(query) {
@@ -37,11 +39,11 @@ export class Network {
         link
             .attr('class', 'link')
             .attr('stroke', function (l) {
-                if (l.type.includes("REGARDING")) {
+                if (l.type.includes(elements.REGARDING)) {
                     return "#A9A9A9";
-                } else if (l.type.includes("CONCLUDES")) {
+                } else if (l.type.includes(elements.CONCLUDES)) {
                     return "#ce34ff";
-                } else if (l.type.includes("PREMISE_OF")) {
+                } else if (l.type.includes(elements.PREMISEOF)) {
                     return "#7b6fcc";
                 }
             })
@@ -49,9 +51,7 @@ export class Network {
                 tooltip.transition()
                     .duration(300)
                     .style("opacity", 0.8);
-                tooltip.html("Source:" + d.source.id +
-                    "<p/>Target:" + d.target.id +
-                    "<p/>Type:" + d.type)
+                tooltip.html(getEdgeTooltipOf(d))
                     .style("left", (d3.event.pageX) + "px")
                     .style("top", (d3.event.pageY + 10) + "px");
             })
@@ -78,13 +78,13 @@ export class Network {
         node.append('circle')
             .attr('r', R)
             .attr("fill", function (d) {
-                if (d.labels.includes("Attack")) {
+                if (d.labels.includes(elements.ATTACK)) {
                     return "#ff0000";
-                } else if (d.labels.includes("Support")) {
+                } else if (d.labels.includes(elements.SUPPORT)) {
                     return "#00ff00";
-                } else if (d.labels.includes("Statement")) {
+                } else if (d.labels.includes(elements.STATEMENT)) {
                     return "#ffff00";
-                } else if (d.labels.includes("Issue")) {
+                } else if (d.labels.includes(elements.ISSUE)) {
                     return "#0000ff"
                 }
             })
@@ -94,20 +94,11 @@ export class Network {
                     .style("opacity", .8);
                 let info = "";
                 if (d.labels.includes("Issue")) {
-                    info = "id:" + d.id
-                        + "<p/>Labels:" + d.labels
-                        + "<p/>Title:" + d.title;
-                } else if (d.labels.includes("Statement")) {
-                    info = "<div class='card'>"
-                        + "<img src='https://www.w3schools.com/w3images/avatar2.png' width='80' height='80'/>"
-                        + "<div class='container'>"
-                        + "<h4><b>John Doe</b></h4>"
-                        + "<p>id:" + d.id
-                        + "<p/>Labels:" + d.labels
-                        + "<p/>Textversion:" + d.textversion;
-                } else if (d.labels.includes("Argument")) {
-                    info = "id:" + d.id
-                        + "<p/>Labels:" + d.labels;
+                    info = getIssueTooltipOf(d);
+                } else if (d.labels.includes(elements.STATEMENT)) {
+                    info = getStatementTooltipOf(d);
+                } else if (d.labels.includes(elements.ARGUMENT)) {
+                    info = getArgumentTooltipOf(d);
                 }
                 tooltip.html(info)
                     .style("left", (d3.event.pageX) + "px")