diff --git a/src/app.js b/src/app.js index 2b5ee25acdf78ad56dca86fa5a39da79bfe5bcdd..ddca02d3d0c7af537742bf4fab0705a0ecd27a6b 100644 --- a/src/app.js +++ b/src/app.js @@ -1,2 +1,5 @@ -import {Network} from './js/visualizer/visualization' +import './styles/link.scss'; +import './styles/node.scss'; +import './styles/tooltip.scss'; +import {Network} from './js/visualizer/visualization'; new Network().showNetwork('match (a:Issue{id:2})<-[r*..]-(b) return *'); \ No newline at end of file diff --git a/src/index.html b/src/index.html index 0b9c23a308265c78567984b59c0ab7572f264c5e..b499b84a3c1fe3c789e8f7708b5707aaa62f5ac9 100644 --- a/src/index.html +++ b/src/index.html @@ -1,34 +1,6 @@ <!DOCTYPE html> <meta charset="utf-8"> <style> - - .link { - stroke: #ffffff; - stroke-width: 2px; - pointer-events: all; - } - - .node circle { - pointer-events: all; - stroke: #ffffff; - stroke-width: 1px; - fill: grey; - } - - div.tooltip { - position: absolute; - background-color: #ffd899; - max-width; - 200px; - height: auto; - padding: 2px; - border-style: solid; - border-radius: 4px; - border-width: 1px; - box-shadow: 3px 3px 10px rgba(0, 0, 0, .5); - pointer-events: none; - } - svg { background: black; } diff --git a/src/js/visualizer/visualization.js b/src/js/visualizer/visualization.js index 4108444db25490f1fe2815339ec72dd419f9ee94..596f3438fb9d5529ce530306221b2a62e683d898 100644 --- a/src/js/visualizer/visualization.js +++ b/src/js/visualizer/visualization.js @@ -1,5 +1,4 @@ import * as d3 from 'd3' -import {legendColor} from 'd3-svg-legend' import {Neo4JAdapter} from '../neo4j/neo' import {Graph} from '../graph/graph' import {GraphCreator} from '../graph/graphCreator' @@ -9,8 +8,6 @@ export class Network { async showNetwork(query) { const graph = await new GraphCreator().fill(new Graph(), query); - var color = d3.scaleOrdinal(d3.schemeSet3); - var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") @@ -22,21 +19,32 @@ export class Network { const simulation = d3.forceSimulation() .nodes(graph.nodes) - .force('link', d3.forceLink().id(d => d.id).distance(20)) + .force('link', d3.forceLink().id(d => d.id).distance(100)) .force('charge', d3.forceManyBody()) .force('center', d3.forceCenter(width / 2, height / 2)) + .velocityDecay(0.3) + .alphaTarget(1) .on('tick', ticked); simulation.force('link') .links(graph.edges); - const R = 6; + const R = 10; let link = svg.selectAll('line') .data(graph.edges) .enter().append('line'); link .attr('class', 'link') + .attr('stroke', function (l) { + if (l.type.includes("REGARDING")) { + return "#A9A9A9"; + } else if (l.type.includes("CONCLUDES")) { + return "#ce34ff"; + } else if (l.type.includes("PREMISE_OF")) { + return "#7b6fcc"; + } + }) .on('mouseover.tooltip', function (d) { tooltip.transition() .duration(300) @@ -70,7 +78,15 @@ export class Network { node.append('circle') .attr('r', R) .attr("fill", function (d) { - return color(d.labels); + if (d.labels.includes("Attack")) { + return "#ff0000"; + } else if (d.labels.includes("Support")) { + return "#00ff00"; + } else if (d.labels.includes("Statement")) { + return "#ffff00"; + } else if (d.labels.includes("Issue")) { + return "#0000ff" + } }) .on('mouseover.tooltip', function (d) { tooltip.transition() @@ -81,12 +97,15 @@ export class Network { info = "id:" + d.id + "<p/>Labels:" + d.labels + "<p/>Title:" + d.title; - }else if (d.labels.includes("Statement")){ - info = "id:" + d.id + } 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")){ + } else if (d.labels.includes("Argument")) { info = "id:" + d.id + "<p/>Labels:" + d.labels; } @@ -105,12 +124,7 @@ export class Network { tooltip.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY + 10) + "px"); }) - .on('dblclick', releasenode) - - node.append('text') - .attr('x', 0) - .attr('dy', '.35em') - .text(d => d.name); + .on('dblclick', releasenode); function ticked() { link @@ -120,7 +134,13 @@ export class Network { .attr('y2', d => d.target.y); node - .attr('transform', d => `translate(${d.x},${d.y})`); + .attr('transform', d => `translate(${d.x},${d.y})`) + .attr("cx", function (d) { + return d.x = Math.max(R, Math.min(width - R, d.x)); + }) + .attr("cy", function (d) { + return d.y = Math.max(R, Math.min(height - R, d.y)); + }); } function dragstarted(d) { @@ -138,6 +158,10 @@ export class Network { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; + + graph.nodes[0].x = width / 2; + graph.nodes[0].y = height / 2; + } function releasenode(d) { @@ -167,24 +191,8 @@ export class Network { }; } - var sequentialScale = d3.scaleOrdinal(d3.schemeSet3) - .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); - svg.append("g") .attr("class", "legendSequential") .attr("transform", "translate(" + (width - 100) + "," + (height - 300) + ")"); - - - var legendSequential = legendColor() - .shapeWidth(30) - .cells(11) - .orient("vertical") - .title("Group number by color:") - .titleWidth(100) - .scale(sequentialScale); - - svg.select(".legendSequential") - .call(legendSequential); - } } \ No newline at end of file diff --git a/src/styles/link.scss b/src/styles/link.scss new file mode 100644 index 0000000000000000000000000000000000000000..4faecabd36b774d1312e74ed5508ec2a709e865c --- /dev/null +++ b/src/styles/link.scss @@ -0,0 +1,4 @@ +.link { + stroke-width: 5px; + pointer-events: all; +} diff --git a/src/styles/node.scss b/src/styles/node.scss new file mode 100644 index 0000000000000000000000000000000000000000..5f8215beff8d567d8ebff469702de80175a9ee4e --- /dev/null +++ b/src/styles/node.scss @@ -0,0 +1,5 @@ +.node circle { + pointer-events: all; + stroke: #ffffff; + stroke-width: 4px; +} \ No newline at end of file diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss new file mode 100644 index 0000000000000000000000000000000000000000..974197c8ac760928740043b5557368e24e501c42 --- /dev/null +++ b/src/styles/tooltip.scss @@ -0,0 +1,28 @@ + +.card { + box-shadow: 0 4px 8px 0 rgba(170, 0, 200, 0.2); + transition: 0.3s; + width: 100%; +} + +.card:hover { + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); +} + +.container { + padding: 2px 16px; +} + +div.tooltip { + position: absolute; + background-color: #fff1d2; + max-width: 200px; + width: auto; + height: auto; + padding: 2px; + border-style: solid; + border-radius: 8px; + border-width: 1px; + box-shadow: 3px 3px 10px rgba(255, 255, 255, 0.5); + pointer-events: none; +} \ No newline at end of file