JupyterDash.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from jupyter_plotly_dash import JupyterDash"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "\n",
    "dd = JupyterDash('SomeID', serve_locally=False)\n",
    "\n",
    "dd.layout = html.Div([dcc.RadioItems(id='item_list', \n",
    "                                     options = [dict(label = k, value = k) for k in ['Hey', 'HiHi']]), \n",
    "                      html.Div(id='button_list')])\n",
    "@dd.expanded_callback(\n",
    "    Output(component_id='button_list', component_property='children'),\n",
    "    [Input(component_id='item_list', component_property='value')],\n",
    ")\n",
    "def update_button_list(selected_idx, **kwargs):\n",
    "    #print(\"Selected index is %s\"%selected_idx)\n",
    "    if selected_idx is not None:\n",
    "        return [html.Button('Hey %s %04d' % (selected_idx, i),\n",
    "                            id = 'id_%s_%04d' % (selected_idx, i)) for i in range(len(selected_idx))]\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "  <iframe src=\"/app/endpoints/b721a9cd65a1465eb22b8dbc13875c4d/\" width=600 height=200 frameborder=\"0\"></iframe>\n",
       "  <hr/><a href=\"/app/endpoints/b721a9cd65a1465eb22b8dbc13875c4d/\" target=\"_new\">Open in new window</a> for /app/endpoints/b721a9cd65a1465eb22b8dbc13875c4d/\n",
       "</div>"
      ],
      "text/plain": [
       "<jupyter_plotly_dash.dash_wrapper.JupyterDash at 0x7f9d9f80c1d0>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "dd.width = 600\n",
    "dd.height = 200\n",
    "dd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'/app/endpoints/b721a9cd65a1465eb22b8dbc13875c4d/'"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "dd.get_app_root_url()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "dd.local_uuid\n",
    "dd.use_nbproxy = True"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app = JupyterDash('SimpleExample')\n",
    "\n",
    "app.layout = html.Div([\n",
    "    dcc.RadioItems(\n",
    "        id='dropdown-color',\n",
    "        options=[{'label': c, 'value': c.lower()} for c in ['Red', 'Green', 'Blue']],\n",
    "        value='red'\n",
    "    ),\n",
    "    html.Div(id='output-color'),\n",
    "    dcc.RadioItems(\n",
    "        id='dropdown-size',\n",
    "        options=[{'label': i, 'value': j} for i, j in [('L','large'), ('M','medium'), ('S','small')]],\n",
    "        value='medium'\n",
    "    ),\n",
    "    html.Div(id='output-size')\n",
    "\n",
    "])\n",
    "\n",
    "@app.callback(\n",
    "    dash.dependencies.Output('output-color', 'children'),\n",
    "    [dash.dependencies.Input('dropdown-color', 'value')])\n",
    "def callback_color(dropdown_value):\n",
    "    return \"The selected color is %s.\" % dropdown_value\n",
    "\n",
    "@app.callback(\n",
    "    dash.dependencies.Output('output-size', 'children'),\n",
    "    [dash.dependencies.Input('dropdown-color', 'value'),\n",
    "     dash.dependencies.Input('dropdown-size', 'value')])\n",
    "def callback_size(dropdown_color, dropdown_size):\n",
    "    return \"The chosen T-shirt is a %s %s one.\" %(dropdown_size,\n",
    "                                                  dropdown_color)\n",
    "\n",
    "a2 = JupyterDash(\"Ex2\")\n",
    "a2.layout = html.Div([\n",
    "    dcc.Interval(id='ticking-interval',\n",
    "                 interval=2500),\n",
    "    dcc.RadioItems(id=\"dropdown-one\",options=[{'label':i,'value':j} for i,j in [\n",
    "    (\"O2\",\"Oxygen\"),(\"N2\",\"Nitrogen\"),(\"CO2\",\"Carbon Dioxide\"),(\"CH4\",\"Methane\"),]\n",
    "    ],value=\"Oxygen\"),\n",
    "    html.Div(id=\"output-one\")\n",
    "    ])\n",
    "\n",
    "@a2.expanded_callback(\n",
    "    dash.dependencies.Output('output-one','children'),\n",
    "    [dash.dependencies.Input('dropdown-one','value')],\n",
    "    #events = [Event(component_id=\"ticking-interval\", component_event=\"interval\")]\n",
    "    )\n",
    "def callback_c(*args,**kwargs):\n",
    "    session_state = kwargs.get('session_state', None)\n",
    "    iss = str(\"Incoming session state %s\"%session_state)\n",
    "    if not session_state:\n",
    "        session_state = {}\n",
    "        kwargs['session_state'] = session_state\n",
    "    session_state['the_args'] = args\n",
    "    #session_state['incoming'] = session_state.get('incoming',0) + 1000\n",
    "    return \"Args are %s and kwargs are %s with iss %s\" %(\"\".join(*args),str(kwargs),str(iss))\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app.height=100\n",
    "app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "a2.height = 100\n",
    "a2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def app_info(nb_server_app):\n",
    "    web_app = nb_server_app.web_app\n",
    "    print(web_app.settings)\n",
    "    print(web_app.settings['base_url'])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "a2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%load_ext jupyter_plotly_dash.ipython"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%dash_app feed"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "a2.session_state['BONUS'] = 'some extra stuff'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app.app_state"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from IPython.display import display\n",
    "button = widgets.Button(description=\"Click Me!\")\n",
    "display(button)\n",
    "\n",
    "def on_button_clicked(b):\n",
    "    print(\"Button clicked.\") # Output in Jupyter but not JupyterLab\n",
    "    app.app_state['bc'] = app.app_state.get('bc',0) +1\n",
    "\n",
    "button.on_click(on_button_clicked)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "dd.app_state"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!jupyter serverextension list"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "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.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}