Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some options are rendered with boolean 'True', and not 'true' as they should, thus making JS malformed #297

Open
rjalexa opened this issue Aug 29, 2024 · 0 comments

Comments

@rjalexa
Copy link

rjalexa commented Aug 29, 2024

As you will see from the generated HTML below, some options have a "True" value as opposed to the desired "true" value making the JS syntax invalid.

If I manually edit those 4 'True' values and change them to 'true' the graph display just fine.

Pyvis 0.3.2 - Python 3.11.7 - Thanks

This is how I declare the options:

        graph.set_options(
            """
        {
          "nodes": {
            "font": {"size": 14, "align": "middle"},
            "shape": "dot",
            "size": 20
          },
          "edges": {
            "arrows": {"to": {"enabled": true, "scaleFactor": 1}},
            "font": {"size": 12, "align": "top", "multi": true},
            "smooth": {"enabled": true, "type": "dynamic"},
            "color": {"color": "#D3D3D3"}
          },
          "physics": {
            "forceAtlas2Based": {
              "gravitationalConstant": -50,
              "centralGravity": 0.005,
              "springLength": 200,
              "springConstant": 0.08
            },
            "maxVelocity": 100,
            "solver": "forceAtlas2Based",
            "timestep": 0.35,
            "stabilization": {"iterations": 150}
          },
          "interaction": {"hover": true, "tooltipDelay": 200},
          "tooltip": {
            "delay": 200,
            "duration": 200,
            "fontColor": "black",
            "fontSize": 14,
            "backgroundColor": "white",
            "borderColor": "#666",
            "borderWidth": 1,
            "borderRadius": 3,
            "padding": 10,
            "maxWidth": 300,
            "minWidth": 200,
            "maxHeight": 600
          }
        }
        """
        )

This is how I declare the content I want to generate:

        html_content = f"""
        <html>
        <head>
            <title>{article_title}</title>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
            <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
            <style>
                body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; }}
                h1 {{ margin-bottom: 5px; }}
                .date {{ font-size: 0.8em; color: #666; margin-bottom: 20px; }}
                #mynetwork {{ width: 100%; height: 600px; border: 1px solid lightgray; }}
                .article-text {{ margin-top: 20px; }}
            </style>
        </head>
        <body>
            <h1>{article_title}</h1>
            <div class="date">{article_date}</div>
            <div id="mynetwork"></div>
            <div class="article-text">
                <h2>Article Text</h2>
                <p>{article_text}</p>
            </div>
            <script type="text/javascript">
                console.log('Script execution started');
                var nodes = new vis.DataSet({json.dumps(graph.nodes)});
                var edges = new vis.DataSet({json.dumps(graph.edges)});
                var container = document.getElementById('mynetwork');
                var data = {{
                    nodes: nodes,
                    edges: edges
                }};
                var options = {graph.options};
                console.log('Network data:', JSON.stringify(data));
                document.addEventListener('DOMContentLoaded', function() {{
                    console.log('DOM fully loaded');
                    console.log('Container:', container);
                    console.log('Attempting to create network');
                    var network = new vis.Network(container, data, options);
                    console.log('Network created successfully');
                }});
            </script>
        </body>
        </html>
        """

This is an example of the generated html file:
'\n <html>\n <head>\n <title>English History</title>\n <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>\n <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />\n <style>\n body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }\n h1 { margin-bottom: 5px; }\n .date { font-size: 0.8em; color: #666; margin-bottom: 20px; }\n #mynetwork { width: 100%; height: 600px; border: 1px solid lightgray; }\n .article-text { margin-top: 20px; }\n </style>\n </head>\n <body>\n <h1>English History</h1>\n <div class="date">2024-07-28</div>\n <div id="mynetwork"></div>\n <div class="article-text">\n <h2>Article Text</h2>\n <p>Richard Lionheart pardoned John Lackland</p>\n </div>\n <script type="text/javascript">\n console.log(\'Script execution started\');\n var nodes = new vis.DataSet([{"color": "#6A5ACD", "title": "Giovanni Plantageneto, Giovanni d\'Inghilterra o Giovanni Senzaterra (in inglese: John Lackland o Softsword; in francese antico: Johan sanz Terre; Oxford, 24 dicembre 1166 \\u2013 Newark-on-Trent, 19 ottobre 1216), fu re d\'Inghilterra dal 6 aprile 1199 al 1216, e di fatto ultimo vero sovrano teocratico. Nello stesso periodo fu anche duca d\'Aquitania e Guascogna e conte di Poitiers. Dal 1199 al 1203 fu conte del Maine e duca di Normandia.", "borderWidth": 4, "font": {"color": "#000000", "face": "arial", "align": "middle"}, "id": "John Lackland", "label": "Giovanni d\'Inghilterra", "shape": "dot"}, {"color": "#6A5ACD", "title": "Riccardo I d\'Inghilterra, noto anche con il nome di Riccardo Cuor di Leone (Richard C\\u0153ur de Lion in francese e Richard the Lionheart in inglese) (Oxford, 8 settembre 1157 \\u2013 Ch\\u00e2lus, 6 aprile 1199), \\u00e8 stato re d\'Inghilterra, duca di Normandia, conte del Maine, d\'Angi\\u00f2 e di Turenna, duca d\'Aquitania e Guascogna e conte di Poitiers dal 1189 fino alla sua morte.\\nEra il terzo dei cinque figli maschi del re d\'Inghilterra, duca di Normandia, conte del Maine, d\'Angi\\u00f2 e di Turenna, Enrico II d\'Inghilterra, e della duchessa d\'Aquitania e Guascogna e contessa di Poitiers, Eleonora d\'Aquitania. Riccardo era, per parte di madre, il fratellastro minore di Maria di Champagne e di Alice di Francia.", "borderWidth": 4, "font": {"color": "#000000", "face": "arial", "align": "middle"}, "id": "Richard Lionheart", "label": "Riccardo I d\'Inghilterra", "shape": "dot"}]);\n var edges = new vis.DataSet([{"title": "perdon\\u00f2", "label": "perdon\\u00f2", "from": "Richard Lionheart", "to": "John Lackland", "arrows": "to"}]);\n var container = document.getElementById(\'mynetwork\');\n var data = {\n nodes: nodes,\n edges: edges\n };\n var options = {\'nodes\': {\'font\': {\'size\': 14, \'align\': \'middle\'}, \'shape\': \'dot\', \'size\': 20}, \'edges\': {\'arrows\': {\'to\': {\'enabled\': True, \'scaleFactor\': 1}}, \'font\': {\'size\': 12, \'align\': \'top\', \'multi\': True}, \'smooth\': {\'enabled\': True, \'type\': \'dynamic\'}, \'color\': {\'color\': \'#D3D3D3\'}}, \'physics\': {\'forceAtlas2Based\': {\'gravitationalConstant\': -50, \'centralGravity\': 0.005, \'springLength\': 200, \'springConstant\': 0.08}, \'maxVelocity\': 100, \'solver\': \'forceAtlas2Based\', \'timestep\': 0.35, \'stabilization\': {\'iterations\': 150}}, \'interaction\': {\'hover\': True, \'tooltipDelay\': 200}, \'tooltip\': {\'delay\': 200, \'duration\': 200, \'fontColor\': \'black\', \'fontSize\': 14, \'backgroundColor\': \'white\', \'borderColor\': \'#666\', \'borderWidth\': 1, \'borderRadius\': 3, \'padding\': 10, \'maxWidth\': 300, \'minWidth\': 200, \'maxHeight\': 600}};\n console.log(\'Network data:\', JSON.stringify(data));\n document.addEventListener(\'DOMContentLoaded\', function() {\n console.log(\'DOM fully loaded\');\n console.log(\'Container:\', container);\n console.log(\'Attempting to create network\');\n var network = new vis.Network(container, data, options);\n console.log(\'Network created successfully\');\n });\n </script>\n </body>\n </html>\n '

@rjalexa rjalexa changed the title Some options are rendered with value True and not true as they should making JS malformed Some options are rendered with boolean 'True', and not 'true' as they should, thus making JS malformed Sep 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant