_doc/notebooks/local_js.ipynb

{
  "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": 1
}