{
 "metadata": {
  "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.12-final"
  },
  "orig_nbformat": 2,
  "kernelspec": {
   "name": "python3",
   "display_name": "Python 3.8.12 64-bit ('jbrowse-jupyter': conda)",
   "metadata": {
    "interpreter": {
     "hash": "dc9fc419d624b95bc9cc0bd84733299ab39c72ed5f2a2912fba5b902d66850aa"
    }
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2,
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install git+https://github.com/GMOD/jbrowse-jupyter.git@main"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from dash import html, Dash\n",
    "from dash.dependencies import Input, Output\n",
    "from dash import dcc\n",
    "from jupyter_dash import JupyterDash\n",
    "from jbrowse_jupyter import create, create_component"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    " app = JupyterDash(__name__)\n",
    " server = app.server"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "locations = [\n",
    "    {\"value\": \"17:41,196,332..41,277,401\", \"label\": \"BRCA1\"\n",
    "    },\n",
    "    {\"value\": \"13:32,889,615..32,974,375\", \"label\": \"BRCA2\"},\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "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",
    "    print(location)\n",
    "    conf = create(\"view\", genome=\"hg19\")\n",
    "    conf.set_location(location)\n",
    "    return create_component(conf.get_config())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "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=\"1:1..90\"\n",
    "        ),\n",
    "        html.Hr(),\n",
    "        dcc.Loading(id=\"default-container\"),\n",
    "    ]\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "text/plain": "<IPython.lib.display.IFrame at 0x7f9d58f6db50>",
      "text/html": "\n        <iframe\n            width=\"100%\"\n            height=\"650\"\n            src=\"http://127.0.0.1:3039/\"\n            frameborder=\"0\"\n            allowfullscreen\n            \n        ></iframe>\n        "
     },
     "metadata": {}
    }
   ],
   "source": [
    "app.run_server(mode=\"inline\", use_reloader=False, debug=True, port=3039)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ]
}