dash-component-api.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "source": [
        "# Exploring the Dash Component API\n",
        "\nThese are _beta docs_. A more complete and stable guide will be published in the _official_ Dash User Guide at [https://plot.ly/dash](https://plot.ly/dash)."
      ],
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": [
        "import dash\n",
        "import dash_html_components as html"
      ],
      "outputs": [],
      "execution_count": 3,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "code",
      "source": [
        "# Please see https://plot.ly/dash/installation for the latest\n",
        "print(dash.__version__)\n",
        "print(html.__version__)"
      ],
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "0.17.7\n",
            "0.6.2\n"
          ]
        }
      ],
      "execution_count": 4,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "code",
      "source": [
        "layout = html.Div([\n",
        "    html.Div(id='child 1'),\n",
        "    'A string',\n",
        "    html.Div([\n",
        "        html.Div(id='grandchild 1', children=[\n",
        "            html.H1(id='great grandchild 1')\n",
        "        ]),\n",
        "        html.Img(id='grandchild 2')\n",
        "    ]),\n",
        "    3.14,\n",
        "    html.Div([\n",
        "        html.Div(id='grandchild 3'),\n",
        "        html.Div(id='grandchild 4', children=[\n",
        "            html.H1(id='great grandchild 1')\n",
        "        ])\n",
        "    ], id='child 2')\n",
        "])"
      ],
      "outputs": [],
      "execution_count": 9,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "Dash components subclass Python's \"`MutableMappings`\" Abstract Base Class. This means that they look and feel sort of like a `dict`.\n",
        "\n",
        "Dash components represent a tree with `children` as the key to specify children or sub-trees. `children` is always the first keyword argument of Dash components and so it is often left out.\n",
        "\nThe \"keys\" of a Dash component are the IDs in the entire tree (not just the children)."
      ],
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": [
        "layout.keys()"
      ],
      "outputs": [
        {
          "output_type": "execute_result",
          "execution_count": 10,
          "data": {
            "text/plain": [
              "['child 1',\n",
              " 'grandchild 1',\n",
              " 'great grandchild 1',\n",
              " 'grandchild 2',\n",
              " 'child 2',\n",
              " 'grandchild 3',\n",
              " 'grandchild 4',\n",
              " 'great grandchild 1']"
            ]
          },
          "metadata": {}
        }
      ],
      "execution_count": 10,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "The values are the component themselves"
      ],
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": [
        "layout['child 1']"
      ],
      "outputs": [
        {
          "output_type": "execute_result",
          "execution_count": 11,
          "data": {
            "text/plain": [
              "Div(id='child 1')"
            ]
          },
          "metadata": {}
        }
      ],
      "execution_count": 11,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "code",
      "source": [
        "layout['child 2']"
      ],
      "outputs": [
        {
          "output_type": "execute_result",
          "execution_count": 12,
          "data": {
            "text/plain": [
              "Div(children=[Div(id='grandchild 3'), Div(children=[H1(id='great grandchild 1')], id='grandchild 4')], id='child 2')"
            ]
          },
          "metadata": {}
        }
      ],
      "execution_count": 12,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "code",
      "source": [
        "layout['grandchild 1']"
      ],
      "outputs": [
        {
          "output_type": "execute_result",
          "execution_count": 13,
          "data": {
            "text/plain": [
              "Div(children=[H1(id='great grandchild 1')], id='grandchild 1')"
            ]
          },
          "metadata": {}
        }
      ],
      "execution_count": 13,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "code",
      "source": [
        "for component_id, component in layout.iteritems():\n",
        "    print component_id, component"
      ],
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "child 1 Div(id='child 1')\n",
            "grandchild 1 Div(children=[H1(id='great grandchild 1')], id='grandchild 1')\n",
            "great grandchild 1 H1(id='great grandchild 1')\n",
            "grandchild 2 Img(id='grandchild 2')\n",
            "child 2 Div(children=[Div(id='grandchild 3'), Div(children=[H1(id='great grandchild 1')], id='grandchild 4')], id='child 2')\n",
            "grandchild 3 Div(id='grandchild 3')\n",
            "grandchild 4 Div(children=[H1(id='great grandchild 1')], id='grandchild 4')\n",
            "great grandchild 1 H1(id='great grandchild 1')\n"
          ]
        }
      ],
      "execution_count": 15,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "If you want to loop through _all_ of the items in the tree, you can use `.traverse()`:"
      ],
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": [
        "for component in layout.traverse():\n",
        "    print component"
      ],
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Div(id='child 1')\n",
            "A string\n",
            "Div([Div(children=[H1(id='great grandchild 1')], id='grandchild 1'), Img(id='grandchild 2')])\n",
            "Div(children=[H1(id='great grandchild 1')], id='grandchild 1')\n",
            "H1(id='great grandchild 1')\n",
            "Img(id='grandchild 2')\n",
            "3.14\n",
            "Div(children=[Div(id='grandchild 3'), Div(children=[H1(id='great grandchild 1')], id='grandchild 4')], id='child 2')\n",
            "Div(id='grandchild 3')\n",
            "Div(children=[H1(id='great grandchild 1')], id='grandchild 4')\n",
            "H1(id='great grandchild 1')\n"
          ]
        }
      ],
      "execution_count": 16,
      "metadata": {
        "collapsed": false,
        "outputHidden": false,
        "inputHidden": false
      }
    }
  ],
  "metadata": {
    "kernelspec": {
      "name": "python2",
      "language": "python",
      "display_name": "venvpy27"
    },
    "kernel_info": {
      "name": "python2"
    },
    "language_info": {
      "mimetype": "text/x-python",
      "nbconvert_exporter": "python",
      "name": "python",
      "pygments_lexer": "ipython2",
      "version": "2.7.11",
      "file_extension": ".py",
      "codemirror_mode": {
        "version": 2,
        "name": "ipython"
      }
    }
  },
  "nbformat": 4,
  "nbformat_minor": 4
}