{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Using dash callbacks to control the state of a JBrowse 2 Linear Genome View"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "from dash import dcc, html, Dash\n",
    "from dash.dependencies import Input, Output\n",
    "from jbrowse_jupyter import create, create_component"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create a Jupyter dash app\n",
    "app = Dash(__name__)\n",
    "server = app.server\n",
    "\n",
    "# Docs: https://github.com/plotly/jupyter-dash"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We want to create a small jupyter dash application that uses a drop down to change the location of the JBrowse Linear Genome View.\n",
    "\n",
    "More info on dash callbacks here: https://dash.plotly.com/basic-callbacks"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "locations = [\n",
    "    {\"value\": \"17:41,196,332..41,277,401\", \"label\": \"location 1: 17:41,196,332..41,277,40\"\n",
    "    },\n",
    "    {\"value\": \"13:32,889,615..32,974,375\", \"label\": \"location 2: 13:32,889,615..32,974,375\"},\n",
    "]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Using a dash call back, we will use the jbrowse jupyter api to change the location of the hg19 config when we choose a location from the dropdown\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Return the component with a specific location. \n",
    "@app.callback(\n",
    "    Output(\"default-container\", \"children\"), Input(\"location-to-view\", \"value\")\n",
    ")\n",
    "def return_jbrowse(location):\n",
    "    conf = create(\"view\", genome=\"hg19\")\n",
    "    conf.set_location(location)\n",
    "    conf.set_default_session(['repeats_hg19'])\n",
    "    return create_component(conf.get_config())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create the layout of the dash python application "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "app.layout = html.Div(\n",
    "    [\n",
    "        html.P(\"Select a location to view.\"),\n",
    "        dcc.Dropdown(\n",
    "            id=\"location-to-view\", options=locations, value=\"13:32,941,561..32,941,588\"\n",
    "        ),\n",
    "        html.Hr(),\n",
    "        dcc.Loading(id=\"default-container\"),\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Dash app running on http://127.0.0.1:3039/\n"
     ]
    }
   ],
   "source": [
    "app.run_server(mode=\"external\", use_reloader=False, debug=True, port=3039)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3.8.13 ('jbrowse-jupyter')",
   "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.8.13"
  },
  "orig_nbformat": 2,
  "vscode": {
   "interpreter": {
    "hash": "aaf81c8f28912d07c45359b3a81eb2244c23c90e1b370733684a5666e4e4597e"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}