{"cells": [{"cell_type": "markdown", "metadata": {}, "source": ["# Try local javascript\n", "\n", "Use javascript in a notebook with local scripts."]}, {"cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"my_id_menu_nb\">run previous cell, wait for 2 seconds</div>\n", "<script>\n", "function repeat_indent_string(n){\n", "    var a = \"\" ;\n", "    for ( ; n > 0 ; --n)\n", "        a += \"    \";\n", "    return a;\n", "}\n", "// look up into all sections and builds an automated menu //\n", "var update_menu_string = function(begin, lfirst, llast, sformat, send, keep_item, begin_format, end_format) {\n", "    var anchors = document.getElementsByClassName(\"section\");\n", "    if (anchors.length == 0) {\n", "        anchors = document.getElementsByClassName(\"text_cell_render rendered_html\");\n", "    }\n", "    var i,t;\n", "    var text_menu = begin;\n", "    var text_memo = \"<pre>\\nlength:\" + anchors.length + \"\\n\";\n", "    var ind = \"\";\n", "    var memo_level = 1;\n", "    var href;\n", "    var tags = [];\n", "    var main_item = 0;\n", "    var format_open = 0;\n", "    for (i = 0; i <= llast; i++)\n", "        tags.push(\"h\" + i);\n", "\n", "    for (i = 0; i < anchors.length; i++) {\n", "        text_memo += \"**\" + anchors[i].id + \"--\\n\";\n", "\n", "        var child = null;\n", "        for(t = 0; t < tags.length; t++) {\n", "            var r = anchors[i].getElementsByTagName(tags[t]);\n", "            if (r.length > 0) {\n", "child = r[0];\n", "break;\n", "            }\n", "        }\n", "        if (child == null) {\n", "            text_memo += \"null\\n\";\n", "            continue;\n", "        }\n", "        if (anchors[i].hasAttribute(\"id\")) {\n", "            // when converted in RST\n", "            href = anchors[i].id;\n", "            text_memo += \"#1-\" + href;\n", "            // passer \u00e0 child suivant (le chercher)\n", "        }\n", "        else if (child.hasAttribute(\"id\")) {\n", "            // in a notebook\n", "            href = child.id;\n", "            text_memo += \"#2-\" + href;\n", "        }\n", "        else {\n", "            text_memo += \"#3-\" + \"*\" + \"\\n\";\n", "            continue;\n", "        }\n", "        var title = child.textContent;\n", "        var level = parseInt(child.tagName.substring(1,2));\n", "\n", "        text_memo += \"--\" + level + \"?\" + lfirst + \"--\" + title + \"\\n\";\n", "\n", "        if ((level < lfirst) || (level > llast)) {\n", "            continue ;\n", "        }\n", "        if (title.endsWith('\u00b6')) {\n", "            title = title.substring(0,title.length-1).replace(\"<\", \"&lt;\")\n", "         .replace(\">\", \"&gt;\").replace(\"&\", \"&amp;\");\n", "        }\n", "        if (title.length == 0) {\n", "            continue;\n", "        }\n", "\n", "        while (level < memo_level) {\n", "            text_menu += end_format + \"</ul>\\n\";\n", "            format_open -= 1;\n", "            memo_level -= 1;\n", "        }\n", "        if (level == lfirst) {\n", "            main_item += 1;\n", "        }\n", "        if (keep_item != -1 && main_item != keep_item + 1) {\n", "            // alert(main_item + \" - \" + level + \" - \" + keep_item);\n", "            continue;\n", "        }\n", "        while (level > memo_level) {\n", "            text_menu += \"<ul>\\n\";\n", "            memo_level += 1;\n", "        }\n", "        text_menu += repeat_indent_string(level-2);\n", "        text_menu += begin_format + sformat.replace(\"__HREF__\", href).replace(\"__TITLE__\", title);\n", "        format_open += 1;\n", "    }\n", "    while (1 < memo_level) {\n", "        text_menu += end_format + \"</ul>\\n\";\n", "        memo_level -= 1;\n", "        format_open -= 1;\n", "    }\n", "    text_menu += send;\n", "    //text_menu += \"\\n\" + text_memo;\n", "\n", "    while (format_open > 0) {\n", "        text_menu += end_format;\n", "        format_open -= 1;\n", "    }\n", "    return text_menu;\n", "};\n", "var update_menu = function() {\n", "    var sbegin = \"\";\n", "    var sformat = '<a href=\"#__HREF__\">__TITLE__</a>';\n", "    var send = \"\";\n", "    var begin_format = '<li>';\n", "    var end_format = '</li>';\n", "    var keep_item = -1;\n", "    var text_menu = update_menu_string(sbegin, 2, 4, sformat, send, keep_item,\n", "       begin_format, end_format);\n", "    var menu = document.getElementById(\"my_id_menu_nb\");\n", "    menu.innerHTML=text_menu;\n", "};\n", "window.setTimeout(update_menu,2000);\n", "            </script>"], "text/plain": ["<IPython.core.display.HTML object>"]}, "execution_count": 2, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import add_notebook_menu\n", "add_notebook_menu()"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## JSJSON"]}, {"cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"c0221885-9adf-4f56-b8bd-86c51ce14d21\" style=\"height: 100%; width:100%;\" show_to_level=3></div>\n", "<script>\n", "\n", "        require([\"renderjson.js\"], function() {\n", "        document.getElementById('c0221885-9adf-4f56-b8bd-86c51ce14d21').appendChild(renderjson({\"name\": \"xavier\", \"city\": \"Paris\"}))\n", "        }); \n", "</script>\n"], "text/plain": ["<jyquickhelper.jspy.render_nb_json.RenderJSON at 0x1c5ca7d9630>"]}, "execution_count": 3, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import JSONJS\n", "JSONJS(dict(name=\"xavier\", city=\"Paris\"), only_html=True, show_to_level=3, local=True)"]}, {"cell_type": "markdown", "metadata": {}, "source": ["The function copies the javascript code in the current folder."]}, {"cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [{"data": {"text/plain": ["['custom_demo.js', 'renderjson.js', 'vis.min.js', 'viz-lite.js', 'viz.js']"]}, "execution_count": 4, "metadata": {}, "output_type": "execute_result"}], "source": ["import os\n", "[_ for _ in os.listdir(os.getcwd()) if '.js' in _]"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## RenderJsDot"]}, {"cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"Mfc2877b55a1a4aab86453bc614e44db7-cont\"><div id=\"Mfc2877b55a1a4aab86453bc614e44db7\" style=\"width:100%;height:100%;\"></div></div>\n", "<script>\n", "\n", "require(['viz.js'], function() { var svgGraph = Viz(\"\\ndigraph {\\n    d[label=\\\"longer label\\\"];\\n    a -> b -> c;\\n    b -> d;\\n}\\n\");\n", "document.getElementById('Mfc2877b55a1a4aab86453bc614e44db7').innerHTML = svgGraph; });\n", "\n", "</script>"], "text/plain": ["<jyquickhelper.jspy.render_nb_js_dot.RenderJsDot at 0x1c5ca7d9dd8>"]}, "execution_count": 5, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import RenderJsDot\n", "\n", "dot = \"\"\"\n", "digraph {\n", "    d[label=\"longer label\"];\n", "    a -> b -> c;\n", "    b -> d;\n", "}\n", "\"\"\"\n", "\n", "RenderJsDot(dot, local=True)"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## RenderJsVis"]}, {"cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [], "source": ["script = \"\"\"\n", "  var nodes = new vis.DataSet([\n", "    {id: 1, label: 'Node 1'},\n", "    {id: 2, label: 'Node 2'},\n", "    {id: 3, label: 'Node 3'},\n", "    {id: 4, label: 'Node 4'},\n", "    {id: 5, label: 'Node 5'}\n", "  ]);\n", "\n", "  // create an array with edges\n", "  var edges = new vis.DataSet([\n", "    {from: 1, to: 3},\n", "    {from: 1, to: 2},\n", "    {from: 2, to: 4},\n", "    {from: 2, to: 5},\n", "    {from: 3, to: 3}\n", "  ]);\n", "\n", "  // create a network\n", "  var data = {\n", "    nodes: nodes,\n", "    edges: edges\n", "  };\n", "  var options = {};\n", "\"\"\""]}, {"cell_type": "code", "execution_count": 6, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"Made01c2c674944f986ba0973ad2aa2f4-css\"><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis-network.min.css\" type=\"text/css\" /><link rel=\"stylesheet\" href=\"http://www.xavierdupre.fr/js/visjs/vis.min.css\" type=\"text/css\" /><div id=\"Made01c2c674944f986ba0973ad2aa2f4\" style=\"width:400px;height:300px;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'http://www.xavierdupre.fr/js/visjs/vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "  var nodes = new vis.DataSet([\n", "    {id: 1, label: 'Node 1'},\n", "    {id: 2, label: 'Node 2'},\n", "    {id: 3, label: 'Node 3'},\n", "    {id: 4, label: 'Node 4'},\n", "    {id: 5, label: 'Node 5'}\n", "  ]);\n", "\n", "  // create an array with edges\n", "  var edges = new vis.DataSet([\n", "    {from: 1, to: 3},\n", "    {from: 1, to: 2},\n", "    {from: 2, to: 4},\n", "    {from: 2, to: 5},\n", "    {from: 3, to: 3}\n", "  ]);\n", "\n", "  // create a network\n", "  var data = {\n", "    nodes: nodes,\n", "    edges: edges\n", "  };\n", "  var options = {};\n", "\n", "var options = {direction:\"UD\", };\n", "\n", "var container = document.getElementById('Made01c2c674944f986ba0973ad2aa2f4');\n", "var network = new vis.Network(container, data, options);\n", " });\n", "\n", "</script>"], "text/plain": ["<jyquickhelper.jspy.render_nb_js_vis.RenderJsVis at 0x1c5ca7e8320>"]}, "execution_count": 7, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import RenderJsVis\n", "RenderJsVis(script, local=False, width=\"400px\", height=\"300px\")"]}, {"cell_type": "markdown", "metadata": {}, "source": ["## RenderJsVis with DOT\n", "\n", "[DOT](https://en.wikipedia.org/wiki/DOT_(graph_description_language) is quite popular to desccribe graph."]}, {"cell_type": "code", "execution_count": 7, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"Md2f71d162107432887a1ae3517637c38-css\"><link rel=\"stylesheet\" href=\"vis-network.min.css\" type=\"text/css\" /><link rel=\"stylesheet\" href=\"vis.min.css\" type=\"text/css\" /><div id=\"Md2f71d162107432887a1ae3517637c38\" style=\"width:100%;height:100%;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "var DOTstring = '\\ndigraph {\\n    d[label=\"longer label\"];\\n    a -> b -> c;\\n    b -> d;\\n}\\n';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var data = { nodes: parsedData.nodes, edges: parsedData.edges };\n", "var options = parsedData.options;\n", "                \n", "var options = {direction:\"UD\", };\n", "\n", "var container = document.getElementById('Md2f71d162107432887a1ae3517637c38');\n", "var network = new vis.Network(container, data, options);\n", " });\n", "\n", "</script>"], "text/plain": ["<jyquickhelper.jspy.render_nb_js_vis.RenderJsVis at 0x1c5ca7a3550>"]}, "execution_count": 8, "metadata": {}, "output_type": "execute_result"}], "source": ["from jyquickhelper import RenderJsVis\n", "\n", "dot = \"\"\"\n", "digraph {\n", "    d[label=\"longer label\"];\n", "    a -> b -> c;\n", "    b -> d;\n", "}\n", "\"\"\"\n", "\n", "RenderJsVis(dot=dot, local=True)"]}, {"cell_type": "code", "execution_count": 8, "metadata": {}, "outputs": [{"data": {"text/html": ["<div id=\"Mf43e020b6f8644edbb4e2be945c05ab9-css\"><link rel=\"stylesheet\" href=\"vis-network.min.css\" type=\"text/css\" /><link rel=\"stylesheet\" href=\"vis.min.css\" type=\"text/css\" /><div id=\"Mf43e020b6f8644edbb4e2be945c05ab9\" style=\"width:100%;height:200px;\"></div></div>\n", "<script>\n", "require.config({\n", "paths:{\n", "'vis':'vis.min',\n", "},\n", "});\n", "\n", "require(['vis'], function(vis) { \n", "var DOTstring = '\\ndigraph {\\n    d[label=\"longer label\"];\\n    a -> b -> c;\\n    b -> d;\\n}\\n';\n", "var parsedData = vis.network.convertDot(DOTstring);\n", "var data = { nodes: parsedData.nodes, edges: parsedData.edges };\n", "var options = parsedData.options;\n", "                \n", "var options = {layout:{hierarchical:{direction:\"UD\", sortMethod:\"directed\", }, }, };\n", "\n", "var container = document.getElementById('Mf43e020b6f8644edbb4e2be945c05ab9');\n", "var network = new vis.Network(container, data, options);\n", " });\n", "\n", "</script>"], "text/plain": ["<jyquickhelper.jspy.render_nb_js_vis.RenderJsVis at 0x1c5ca7e8128>"]}, "execution_count": 9, "metadata": {}, "output_type": "execute_result"}], "source": ["RenderJsVis(dot=dot, local=True, layout=\"hierarchical\", height=\"200px\")"]}, {"cell_type": "code", "execution_count": 9, "metadata": {}, "outputs": [], "source": []}], "metadata": {"kernelspec": {"display_name": "Python 3", "language": "python", "name": "python3"}, "language_info": {"codemirror_mode": {"name": "ipython", "version": 3}, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.7.2"}}, "nbformat": 4, "nbformat_minor": 2}