interactive/draw_graph.js

// This method is responsible for drawing the graph, returns the drawn network
function drawGraph(graph) {
    const container = document.getElementById(`${graph.dataset}-network`);

    const options = {
        "configure": {
            "enabled": false
        },
        "edges": {
            "color": {
                "inherit": true
            },
            "smooth": {
                "enabled": true,
                "type": "dynamic"
            }
        },
        "interaction": {
            "dragNodes": true,
            "zoomSpeed": 0.7,
            "hideEdgesOnDrag": false,
            "hideNodesOnDrag": false
        },
        "physics": {
            "enabled": true,
            "stabilization": {
                "enabled": true,
                "fit": true,
                "iterations": 1000,
                "onlyDynamicEdges": false,
                "updateInterval": 50
            }
        }
    };

    // parsing and collecting nodes and edges from the python
    const nodes = new vis.DataSet(graph.nodes);
    const edges = new vis.DataSet(graph.edges);

    // adding nodes and edges to the graph
    const data = { nodes: nodes, edges: edges };

    // Create and render the network
    const network = new vis.Network(container, data, options);

    // Add event listener for node selection
    network.on("selectNode", e => {
        const selectedNodeID = e.nodes[0];
        const entityID = graph.nodes[selectedNodeID].node_id;

        // Update graph input
        const graphInput = document.querySelector(`#${graph.dataset}-entity-id-input > label > input`);
        graphInput.value = entityID;
        graphInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));

        // Update text input
        const textInput = document.querySelector(`#${graph.dataset}-entity-id-text-input > label > input`);
        textInput.value = entityID;
        textInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));

        // But just fetch text
        document.querySelector(`#${graph.dataset}-fetch-text-btn`).click();
    });

    return network;
}