diff --git a/src/js/discussionElements.js b/src/js/discussionElements.js
new file mode 100644
index 0000000000000000000000000000000000000000..a4310336ea913cd0e6760fa51da85dba59cc4dfe
--- /dev/null
+++ b/src/js/discussionElements.js
@@ -0,0 +1,10 @@
+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
diff --git a/src/js/graph/graphCreator.js b/src/js/graph/graphCreator.js
index a4d60c3d4d2f7d9f126e12a344343c180b713c90..08e35d9f4ef5b276ea7afe7147fcd32fcd0debd4 100644
--- a/src/js/graph/graphCreator.js
+++ b/src/js/graph/graphCreator.js
@@ -1,5 +1,6 @@
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
diff --git a/src/js/visualizer/tooltip/tooltip.js b/src/js/visualizer/tooltip/tooltip.js
new file mode 100644
index 0000000000000000000000000000000000000000..7b0de9095fd8524e50804042a13328e797ff7566
--- /dev/null
+++ b/src/js/visualizer/tooltip/tooltip.js
@@ -0,0 +1,26 @@
+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
diff --git a/src/js/visualizer/visualization.js b/src/js/visualizer/visualization.js
index 596f3438fb9d5529ce530306221b2a62e683d898..45cce5d9436156fa1a90d5c3f0b68a57a8b904f8 100644
--- a/src/js/visualizer/visualization.js
+++ b/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")