semantic_graph/www/graph.js

const CONFIG = {
    'nodeSize': 8,
    'baseUrl': 'https://www.securityvision.io/wiki/index.php/',
    'dataUrl': 'result.json',
    'preSimulate': false, // run simulation before starting, so we don't start with lines jumping around
    'labels': {
        'rotate': true,
    },
    'countries': ['Austria', 'Italy', 'Belgium', 'Latvia', 'Bulgaria', 'Lithuania', 'Croatia', 'Luxembourg', 'Cyprus', 'Malta', 'Czechia', 'Netherlands', 'Denmark', 'Poland', 'Estonia', 'Portugal', 'Finland	', 'Romania', 'France', 'Slovakia', 'Germany', 'Slovenia', 'Greece', 'Spain', 'Hungary', 'Sweden', 'Ireland'],
    'eu': {
        'lonMin': -10,
        'lonMax': 35,
        'center': [11, 47],
    },
    "filters": ["Institution", "Deployments", "Technology", "Dataset"],

    "link_properties": [
        "Clients",
        "Managed by",
        "Used by",
        "Funded by",
        "Provided by",
        "Software Deployed",
        "Software Developer",
        "Dataset Developer",
    ],

    "geo_properties": [
        "Geolocation",
        "City Coordinates",
        "Country Coordinates",
    ],

    "geo_property_map": { // used to work around a bug in SMW
        "City Coordinates": "City",
        "Country Coordinates": "City Country",
    }
};

// let width = window.innerWidth;
// let height = window.innerHeight;





function getSizeForNode(node) {
    //   if (node.hasOwnProperty('https://schema.org/thumbnailUrl')) return nodeSize;
    //   if (weights[node['@id']]) return nodeSize * weights[node['@id']];
    //   if (node['@id'] == firstNodeId) return nodeSize * 1.2;
    //   // everynode has at least one link. these should equal 1
    //   return nodeSize * (.7 + Math.min(20, linkMap[node['@id']].length) / 40);
    if (node.parent) {
        return 2;
    }
    // if(getCategories(node).indexOf('City') !== -1) {
    //     return 2;
    // }
    return CONFIG.nodeSize;
}

function splitText(text) {
    var characters = [" ", "-", "_", '\xAD'];
    var charSplitPos = {};
    var mid = Math.floor(text.length / 2);
    var splitPos = false;
    var splitPosChar = false;
    // split sentences
    var _iteratorNormalCompletion6 = true;
    var _didIteratorError6 = false;
    var _iteratorError6 = undefined;

    try {
        for (var _iterator6 = characters[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
            var char = _step6.value;

            if (text.indexOf(char) < 0) {
                continue;
            }
            var tmid = text.substr(0, mid).lastIndexOf(char);
            if (tmid === -1) {
                tmid = text.indexOf(char);
            }
            tmid += 1; // we want to cut _after_ the character
            // console.log("Char", char, tmid);
            if (splitPos === false || Math.abs(tmid - mid) < Math.abs(splitPos - mid)) {
                // console.log("least!");
                splitPos = tmid;
                splitPosChar = char;
            }
        }
        // console.log("pos",splitPos)

    } catch (err) {
        _didIteratorError6 = true;
        _iteratorError6 = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion6 && _iterator6.return) {
                _iterator6.return();
            }
        } finally {
            if (_didIteratorError6) {
                throw _iteratorError6;
            }
        }
    }

    if (splitPos === false) {
        return false;
    }

    var text1 = text.substr(0, splitPos).trim();
    var text2 = text.substr(splitPos).trim();

    if (splitPosChar == '\xAD') {
        text1 += "-";
    }

    // find most equal split
    return [text1, text2];
};

function getTitle(obj) {
    return obj.fulltext;
}
function getCategories(obj) {
    // console.log(obj);
    return obj.printouts['Category'].map(n => n.fulltext.split(':')[1]);
}
function getClasses(obj) {
    const classes = getCategories(obj);
    return 'node ' + classes.join(' ');
}



class NodeMap {
    constructor(parent) {
        this.root = d3.select(parent);
        this.resizeEvent = window.addEventListener('resize', this.resize.bind(this));
    }

    resize() {
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        this.vbWidth = 2000;
        this.vbHeight = 2000;
        this.svg
            .attr("viewBox", [0, 0, this.vbWidth, this.vbHeight])
            .attr("width", this.width)
            .attr("height", this.height);
    }


    reset() {
        this.root.select('svg').remove();
        this.render();
    }

    render() {
        this.svg = this.root.append('svg')
        this.svg.append('defs').html('<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="#f3722c"><path d="M0,-3L8,0L0,3"></path></marker><marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker>');
        this.resize();

        this.projection = d3.geoHill()
            .rotate([-12, 0, 0])
            .translate([this.vbWidth / 2, this.vbHeight * 1.5])
            .scale(this.vbHeight * 1.5);

        this.nodeSize = this.vbHeight / 200;

        this.proj = d3.geoPath().projection(this.projection);
        const graticule = d3.geoGraticule10();
        const euCenter = this.projection(CONFIG.eu.center);

        const container = this.svg.append("g").attr("id", "container");
        // container.append("circle").attr("cx", euCenter[0]).attr("cy", euCenter[1]).attr("r", 500).attr("fill","red")

        this.g_countries = container.append("g").attr("id", "countries");
        this.g_borders = container.append("g").attr("id", "borders");
        this.g_graticule = container.append("g").attr('id', 'graticule')
            .append('path')
            .attr("class", "graticule")
            .attr("fill", "none")
            .attr('d', this.proj(graticule))
            .attr("stroke-width", "!px")
            .attr("stroke", (n) => {
                return "lightgray";
            });
        ;


        const c = this.g_countries.selectAll("path")
            .data(this.countries)
            .enter()
            .append("path")
            .attr("class", "countries")
            .attr("d", this.proj)
            .attr("fill", (n) => {
                if (CONFIG.countries.indexOf(n.properties.name) !== -1) {
                    return '';
                }
                return "rgba(200,200,200,.7)";
            });

        this.g_borders
            .append("path")
            .attr("class", "borders")
            .attr("d", this.proj(this.borders))
            .attr("fill", "none")
            .attr("stroke-width", "2px")
            .attr("stroke", (n) => {
                return "white";
            });

        this.svg.call(d3.zoom().scaleExtent([0.3, 8]).on("start", () => {
            this.svg.node().classList.add("dragging");
        }).on("end", () => {
            this.svg.node().classList.remove("dragging");
        }).on("zoom", ({ transform }) => {
            container.attr("transform", transform);
        }));

        this.node = container.append("g")
            .attr('class', 'nodes')
            .selectAll(".node");
        this.link = container.append("g")
            .attr('class', 'links')
            .selectAll(".link");


        this.graph.nodes.forEach((d) => {
            for (const prop of CONFIG.geo_properties) {

                // console.log(this,d.printouts, prop)
                if (d.printouts[prop].length) {
                    // console.log("fix node", d);
                    var p = this.projection([d.printouts[prop][0].lon, d.printouts[prop][0].lat]);
                    d.x = p[0];
                    d.y = p[1];
                    // d.targetX = p[0];
                    // d.targetY = p[1];
                    d.fx = p[0];
                    d.fy = p[1];
                    // d.targetLat = d.printouts[prop][0].lat;
                    // d.targetLon = d.printouts[prop][0].lon;
                    break
                }
            }
        })



        // this.nodeMap = Object.fromEntries(this.graph.nodes.map(d => [d['id'], d]));
        // this.links = this.graph.links.filter(l => this.nodeMap[l.source] && nodeMap[l.target]).map(d => Object.create(d));
        // console.log(this.nodeMap, this.graph.links);


        this.simulation = d3.forceSimulation()
            .force("link", d3.forceLink()
                .id(d => d['@id'])
                .iterations(2) // increase to make more rigid
                .distance((l) => {
                    // if (getCategories(l.source).indexOf('City') || getCategories(l.target).indexOf('City')) {
                    //     // if(l.source.lat || l.target.lat) {
                    //     return 2;
                    // }
                    return this.nodeSize * 5;
                })
            )
            // .force("charge", d3.forceManyBody()
            //     .strength(-10)
            // )
            // .force("center", d3.forceCenter(width / 2, height / 2))
            .force("collision", d3.forceCollide(this.nodeSize))
            // TODO look at simpler labels https://github.com/d3fc/d3fc/tree/master/packages/d3fc-label-layout
            // TODO look at rects https://github.com/emeeks/d3-bboxCollide
            .force("posX", d3.forceX(n => n.targetX || 0).strength(n => n.targetX ? 1 : 0)) // TODO: should not be or 0
            .force("posY", d3.forceY(n => n.targetY || 0).strength(n => n.targetY ? 1 : 0))
            ;

        this.update();
    }

    getSizeForNode(node) {
        return this.nodeSize;
    }

    update() {
        console.log(this.graph)
        // see also: https://www.createwithdata.com/enter-exit-with-d3-join/
        this.node = this.node.data(this.graph.nodes, d => d.id)
            .join((enter) => {
                let group = enter.append("g").attr("class", getClasses);
                // group.call(drag(simulation));
                group.on("click", (evt, n) => selectNode(evt, n, node));
                group.append('circle').attr("r", this.nodeSize);
                var nodeTitle = group.append('text').attr("class", "nodeTitle").attr("y", "5");
                nodeTitle
                    .each(function (node, nodes) {
                        var textLength = void 0;
                        const self = d3.select(this);
                        const titleText = getTitle(node);
                        var titleTexts = false;
                        if (titleText.length > 20) {
                            titleTexts = splitText(titleText);
                        }
                        if (titleTexts !== false) {
                            const tspan1 = self.append("tspan").text(titleTexts[0]).attr("y", "-10").attr("x", "0");
                            const tspan = self.append("tspan").text(titleTexts[1]).attr("y", "10").attr("x", "0");
                            const textLength1 = tspan.node().getComputedTextLength();
                            const textLength2 = tspan.node().getComputedTextLength();
                            textLength = Math.max(textLength1, textLength2);
                        } else {
                            self.text(titleText);
                            textLength = self.node().getComputedTextLength();
                        }
                        // scale according to text length:
                        if (textLength > this.nodeSize * 2) {
                            self.attr('transform', 'scale(' + this.nodeSize * 2 / textLength / 1.05 + ')');
                        }
                    });
                return group;
            });

        this.link = this.link
            .data(this.graph.links)
            .join(
                enter => {
                    console.log(enter);
                    let group = enter.append("g").attr("class", "link");
                    group.append("path").attr("marker-end", "url(#arrowHead)").attr('id', (d, i) => 'linkid_' + i);
                    group.filter((l) => l.name != "City").append("text").attr("class", "labelText").text(function (l) {
                        return l.name;
                    });
                    // group.append("text")
                    //         .attr("class", "labelText")
                    //         .attr("dx", 20)
                    //         .attr("dy", 0)
                    //         .style("fill", "red")
                    //     .append("textPath")
                    //         .attr("xlink:href", function (d, i) { return "#linkid_" + i; })
                    //         .attr("startOffset","50%")
                    //         .text((d,i) => d.name );
                    return group;
                }
            )
            ;


        this.simulation.nodes(this.graph.nodes);
        this.simulation.force("link")
            .links(this.graph.links);

        this.simulation.on("tick", () => {

            // console.log('t', link._groups[0].length);
            const _mapGraph = this;
            this.link.each(function (l) {
                let sourceX, targetX, midX, dx, dy, angle;

                // This mess makes the arrows exactly perfect.
                // thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
                if (l.source.x < l.target.x) {
                    sourceX = l.source.x;
                    targetX = l.target.x;
                } else if (l.target.x < l.source.x) {
                    targetX = l.target.x;
                    sourceX = l.source.x;
                } else if (l.target.isCircle) {
                    targetX = sourceX = l.target.x;
                } else if (l.source.isCircle) {
                    targetX = sourceX = l.source.x;
                } else {
                    midX = (l.source.x + l.target.x) / 2;
                    if (midX > l.target.x) {
                        midX = l.target.x;
                    } else if (midX > l.source.x) {
                        midX = l.source.x;
                    } else if (midX < l.target.x) {
                        midX = l.target.x;
                    } else if (midX < l.source.x) {
                        midX = l.source.x;
                    }
                    targetX = sourceX = midX;
                }

                dx = targetX - sourceX;
                dy = l.target.y - l.source.y;
                angle = Math.atan2(dx, dy);

                /* DISABLED
                srcSize = (typeof nodePositions[l.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
                tgtSize = (typeof nodePositions[l.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
                */
                var srcSize = _mapGraph.getSizeForNode(l.source);
                var tgtSize = _mapGraph.getSizeForNode(l.target);

                // Compute the line endpoint such that the arrow
                // is touching the edge of the node rectangle perfectly.
                l.sourceX = sourceX + Math.sin(angle) * srcSize;
                l.targetX = targetX - Math.sin(angle) * tgtSize;
                l.sourceY = l.source.y + Math.cos(angle) * srcSize;
                l.targetY = l.target.y - Math.cos(angle) * tgtSize;

                // const coor_source = _mapGraph.projection.invert([l.source.x, l.source.y]);
                // const coor_target = _mapGraph.projection.invert([l.target.x, l.target.y]);
                // const middleCoor = [coor_source[0] * .5 + coor_target[0] * .5, coor_source[1] * .5 + coor_target[1] * .5];
                // const middlePoint = _mapGraph.projection(middleCoor);

                const dr = Math.sqrt(dx * dx + dy * dy);

                // "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y
                let rel = d3.select(this);
                rel.select("path") //${middlePoint[0]},${middlePoint[1]}
                    // .attr('d', `M ${l.sourceX},${l.sourceY} L   ${l.targetX},${l.targetY}`)
                    .attr('d', `M ${l.sourceX},${l.sourceY} A ${dr},${dr} 0 0,1   ${l.targetX},${l.targetY}`)
                // .attr("x1", l.sourceX)
                // .attr("y1", l.sourceY)
                // .attr("x2", l.targetX)
                // .attr("y2", l.targetY)

                rel.select('text')
                    .attr("transform", function (d) {
                        const dx = (l.target.x - l.source.x) / 2;
                        const dy = (l.target.y - l.source.y) / 2;
                        const x = l.source.x + dx;
                        const y = l.source.y + dy;
                        const deg = Math.atan(dy / dx) * 180 / Math.PI;
                        // if dx/dy == 0/0 -> deg == NaN
                        if (isNaN(deg)) {
                            return "";
                        }
                        // return "";
                        return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")";
                    });


            })

            this.node
                .attr("transform", d => `translate(${d.x}, ${d.y})`);
        });


        this.simulation.alpha = 0;
        this.simulation.restart();

    }

    setWorld(world) {
        this.borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
        this.countries = topojson.feature(world, world.objects.countries).features;
    }

    setStore(store) {
        this.store = store;
        this.graph = this.store.graph;
        store.registerMap(this);
    }

    // alias for update (redraw is used in dc)
    redraw() {
        this.update()
    }
}

var mapGraph = new NodeMap('#map')

JsonToGraph = function (data) {
    let nodes = [];
    let links = [];

    let smwBugFixLocationMaps = {};
    console.log(data)
    for (const node_id in data.results) {
        if (Object.hasOwnProperty.call(data.results, node_id)) {
            let node = data.results[node_id];
            node.id = node.fulltext; //node_id;
            nodes.push(node);
            // console.log(node_id, node);

            // work around SMW bug in Ask. 1/2
            for (const idx of Object.keys(CONFIG.geo_property_map)) {
                if (node.printouts[idx].length) {
                    const srcProp = CONFIG.geo_property_map[idx];
                    const loc = node.printouts[srcProp][0].fulltext;
                    smwBugFixLocationMaps[loc] = node.printouts[idx];
                    // console.debug("Set location for", loc, node.printouts[idx])
                }
            }

            for (const prop of CONFIG.link_properties) {
                if (!node.printouts.hasOwnProperty(prop)) {
                    continue;
                }
                for (const target_node of node.printouts[prop]) {
                    links.push({
                        "source": node_id,
                        "target": target_node.fulltext,
                        "name": prop
                    })
                }
            }
        }
    }

    let fixes = 0;
    nodes.forEach((node) => {
        // work around SMW bug in Ask. 2/2
        for (const idx of Object.keys(CONFIG.geo_property_map)) {
            if (!node.printouts[idx].length) {
                const srcProp = CONFIG.geo_property_map[idx];
                // only retrievable if we know the name of the location (which for some reason _is_ often there)
                if (!node.printouts[srcProp].length) {
                    continue;
                }
                const loc = node.printouts[srcProp][0].fulltext;
                if (!smwBugFixLocationMaps.hasOwnProperty(loc)) {
                    continue;
                }
                node.printouts[idx] = smwBugFixLocationMaps[loc]
                fixes++;
            }
        }
    })
    
    console.debug(`Fixed location for ${fixes} nodes`);

    console.log(links.length);

    nodeMap = Object.fromEntries(nodes.map(d => [d['id'], d]));
    links = links.filter(l => nodeMap[l.source] && nodeMap[l.target]).map(l => {
        l.source = nodeMap[l.source];
        l.target = nodeMap[l.target];
        return l;
    });



    return { nodes, links }
}



var typeFilterList = [
    // 'Deployments'
]
class Store {
    constructor(graph, parent) {
        this.nodes = graph.nodes;
        this.links = graph.links;
        this.graph = {
            'nodes': [],
            'links': []
        }

        this.root = document.querySelector(parent);

        this._maps = [];

        this.filters = {
            'categories': [],
        }

        this.filter();

    }

    registerMap(map) {
        this._maps.push(map);
        return this;
    }

    update() {
        this._maps.forEach(m => {
            m.update();
        });
    }

    filter() {
        //	add and remove nodes from data based on type filters
        this.nodes.forEach((n) => {
            if (!this.filters.categories.includes(n.printouts['Category'][0].fulltext.split(':')[1])) {
                if (n.filtered || typeof n.filtered === 'undefined') {
                    n.filtered = false;
                    this.graph.nodes.push(n);
                }
            } else if (!n.filtered) {
                n.filtered = true;
                this.graph.nodes.forEach((d, i) => {
                    if (n.id === d.id) {
                        this.graph.nodes.splice(i, 1);
                        return;
                    }
                });
            }
        });

        //	add and remove links from data based on availability of nodes
        this.links.forEach((l) => {
            if (this.graph.nodes.includes(l.source) && this.graph.nodes.includes(l.target)) {
                if (l.filtered || typeof l.filtered === 'undefined')
                    this.graph.links.push(l);
                l.filtered = false;
            } else {
                if (l.filtered === false) {
                    this.graph.links.forEach((d, i) => {
                        if (l.id === d.id) {
                            this.graph.links.splice(i, 1);
                        }
                    });
                }
                l.filtered = true;
            }
        });
    }

    render() {
        CONFIG.filters.forEach(f => {
            let labelEl = document.createElement('label')
            let inputEl = document.createElement('input')
            let textEl = document.createElement('span');
            inputEl.type = "checkbox";
            textEl.innerText = f;
            labelEl.appendChild(inputEl);
            labelEl.appendChild(textEl);

            if (!this.filters.categories.includes(f)) {
                inputEl.checked = true;
            }

            inputEl.addEventListener('change', (e) => {
                if (e.target.checked) {
                    this.filters.categories.forEach((d, i) => {
                        if (d == f) {
                            this.filters.categories.splice(i, 1);
                        }
                    });
                } else {
                    if (!this.filters.categories.includes(f)) {
                        this.filters.categories.push(f);
                    }
                }
                this.filter();
                this.update();
            })

            this.root.appendChild(labelEl);
        })

    }
}


// REQUEST ATLAS & GRAPH
const req_data = new Request(CONFIG.dataUrl, { method: 'GET' });
const req_world = new Request('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json', { method: 'GET' });
Promise.all([fetch(req_data), fetch(req_world)])
    .then(([res_data, res_world]) => {
        return Promise.all([res_data.json(), res_world.json()]);
    })
    .then(([data, world]) => {
        var graph = JsonToGraph(data);
        var store = new Store(graph, '#filters');
        mapGraph.setWorld(world);
        mapGraph.setStore(store);
        store.render()

        mapGraph.render()

    }).catch(error => {
        console.error(error);
    });
;