Skip to content
Snippets Groups Projects
Select Git revision
  • 3c23b07866da8655074b7432e8a1f2a4d6e8c76d
  • master default protected
2 results

visualization.js

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    visualization.js 6.56 KiB
    import * as d3 from 'd3'
    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) {
            const graph = await new GraphCreator().fill(new Graph(), query);
    
            var tooltip = d3.select("body")
                .append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);
    
            const svg = d3.select('svg'),
                width = +svg.attr('width'),
                height = +svg.attr('height');
    
            const simulation = d3.forceSimulation()
                .nodes(graph.nodes)
                .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 = 10;
            let link = svg.selectAll('line')
                .data(graph.edges)
                .enter().append('line');
    
            link
                .attr('class', 'link')
                .attr('stroke', function (l) {
                    if (l.type.includes(elements.REGARDING)) {
                        return "#A9A9A9";
                    } else if (l.type.includes(elements.CONCLUDES)) {
                        return "#ce34ff";
                    } else if (l.type.includes(elements.PREMISEOF)) {
                        return "#7b6fcc";
                    }
                })
                .on('mouseover.tooltip', function (d) {
                    tooltip.transition()
                        .duration(300)
                        .style("opacity", 0.8);
                    tooltip.html(getEdgeTooltipOf(d))
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY + 10) + "px");
                })
                .on("mouseout.tooltip", function () {
                    tooltip.transition()
                        .duration(100)
                        .style("opacity", 0);
                })
                .on('mouseout.fade', fade(1))
                .on("mousemove", function () {
                    tooltip.style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY + 10) + "px");
                });
            ;
            let node = svg.selectAll('.node')
                .data(graph.nodes)