CODEWITHSUNDEEP
networkxvis.jspyvis
Shashi123
Shashi123

Reputation: 159

Node's title doesn't bold the text in tooltip

I use NetworkX and PyVis to generate network graph and view the generated html file in a browser. I had nodes' title constructed using html tags, example <b>this_is_the_node_title_name</b>, so that on hovering over the node, the title is shown in bold (as tooltip), and that did appear as this_is_the_node_title_name as expected, and that was on PyVis version 0.9.1. And I am now on PyVis version 0.2.1 and the same doesn't happen anymore., and on hovering over a node i see the tooltip rendering like <b>this_is_the_node_title_name</b> instead of this_is_the_node_title_name.

I understand the version of PyVis is different, but i am unable to figure out how to make the node's title to appear as this_is_the_node_title_name instead of <b>this_is_the_node_title_name</b>

Please help, i couldn't figure out what is causing to not working here in the code.

Here is a sample graph html reproducing my problem:

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js"> </script>
<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->

<style type="text/css">

        #mynetwork {
            width: 500px;
            height: 500px;
            background-color: #ffffff;
            border: 1px solid lightgray;
            position: relative;
            float: left;
        }

        

        

        
</style>

</head>

<body>
<div id = "mynetwork"></div>


<script type="text/javascript">

    // initialize global variables.
    var edges;
    var nodes;
    var network; 
    var container;
    var options, data;

    
    // This method is responsible for drawing the graph, returns the drawn network
    function drawGraph() {
        var container = document.getElementById('mynetwork');
        
        

        // parsing and collecting nodes and edges from the python
        nodes = new vis.DataSet(
            [
                {
                    "color": "#00ff1e",
                    "id": 1,
                    "title": "<b>NODE 1</b>",
                    "physics": false,
                    "shape": "dot",
                    "label": "I am node 1",
                    "value": 1,
                }
                ,
                {
                    "color": "#162347",
                    "id": 2,
                    "title": "<i>NODE 2</i>",
                    "physics": false,
                    "shape": "dot",
                    "label": "node 2 here",
                    "value": 1,
                },
                {
                    "color": "#dd4b39",
                    "id": 3,
                    "title": "<b><i>NODE 3</i></b>",
                    "physics": false,
                    "shape": "dot",
                    "label": "and im node 3",
                    "value": 1,
                }
                ]
        );
        edges = new vis.DataSet([{"from": 1, "to": 2}, {"from": 1, "to": 3}]);

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

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

        

        network = new vis.Network(container, data, options);
     
        


        

        return network;

    }

    drawGraph();

</script>
</body>
</html>

In that html file, the bold/italic tags are not rendered on overing over a node. For me, it looks like this image: enter image description here

Upvotes: 0

Views: 1108

Answers (2)

Yee Lee
Yee Lee

Reputation: 1

A fix is available by updating the template.html.

Refer to my gist code here - it works by calling the htmlTitle() js function before putting into new vis.Dataset() as recommended by visjs, which is what pyvis wrapped around.

Upvotes: 0

user3999721
user3999721

Reputation:

Already an issue is reported on this long back
https://github.com/WestHealth/pyvis/issues/92

But seems no response on github.
seems pyvis developers need more collaborators.

Upvotes: 0

Related Questions