example-app.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "6cf871b1-8fec-41d4-ac26-d3d8a4ece4be",
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install --pre higlass-python\n",
    "!pip install pydantic==1.9.*\n",
    "!pip install bioframe\n",
    "!pip install jupyter-scatter\n",
    "!pip install pillow\n",
    "!pip install pyarrow"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "683ab527",
   "metadata": {},
   "outputs": [],
   "source": [
    "# from IPython.display import display, HTML\n",
    "# display(HTML(\"<style>.container { width:100% !important; }</style>\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6931fe31-830a-42d6-b683-400fe45e4c98",
   "metadata": {},
   "source": [
    "# Bioframe for application programming\n",
    "\n",
    "Here we use bioframe to link two dynamic widgets:\n",
    "\n",
    "* An interactive scatter plot where each point represents a 50-kb long genomic locus\n",
    "* An interactive genome browser\n",
    "\n",
    "The goal is to enable brushing points in the scatter plot to automatically highlight the corresponding locations in the genome browser.\n",
    "\n",
    "In the callback code, adjacent intervals selected in the scatter plot are combined into larger windows using `bioframe.merge` before updating the browser widget."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "12fd8b19",
   "metadata": {},
   "source": [
    "### Load higlass config"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "ae8821a6",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<!DOCTYPE html>\n",
       "<html>\n",
       "<head>\n",
       "  <link rel=\"stylesheet\" href=\"https://unpkg.com/higlass@1.11/dist/hglib.css\">\n",
       "</head>\n",
       "<body>\n",
       "  <div id=\"jupyter-hg-4707cf6252fb4db6ac1cc9e9d303bac3\"></div>\n",
       "  <script type=\"module\">\n",
       "\n",
       "    async function loadScript(src) {\n",
       "        return new Promise(resolve => {\n",
       "            const script = document.createElement('script');\n",
       "            script.onload = resolve;\n",
       "            script.src = src;\n",
       "            script.async = false;\n",
       "            document.head.appendChild(script);\n",
       "        });\n",
       "    }\n",
       "\n",
       "    async function loadHiglass() {\n",
       "        // need to manually load higlass; disable requirejs\n",
       "\n",
       "        // https://github.com/DanielHreben/requirejs-toggle\n",
       "        window.__requirejsToggleBackup = {\n",
       "            define: window.define,\n",
       "            require: window.require,\n",
       "            requirejs: window.requirejs,\n",
       "        };\n",
       "\n",
       "        for (const field of Object.keys(window.__requirejsToggleBackup)) {\n",
       "            window[field] = undefined;\n",
       "        }\n",
       "\n",
       "        let sources = [];\n",
       "\n",
       "        if (!window.hglib){\n",
       "            sources = sources.concat([\n",
       "                \"https://unpkg.com/react@17/umd/react.production.min.js\",\n",
       "                \"https://unpkg.com/react-dom@17/umd/react-dom.production.min.js\",\n",
       "                \"https://unpkg.com/pixi.js@6/dist/browser/pixi.min.js\",\n",
       "                \"https://unpkg.com/higlass@1.11/dist/hglib.js\",\n",
       "            ]);\n",
       "        }\n",
       "\n",
       "        for (const src of sources) await loadScript(src);\n",
       "\n",
       "        // restore requirejs after scripts have loaded\n",
       "        Object.assign(window, window.__requirejsToggleBackup);\n",
       "        delete window.__requirejsToggleBackup;\n",
       "\n",
       "        return window.hglib;\n",
       "    };\n",
       "\n",
       "    var el = document.getElementById('jupyter-hg-4707cf6252fb4db6ac1cc9e9d303bac3');\n",
       "    var spec = JSON.parse(\"{\\\"editable\\\": true, \\\"viewEditable\\\": true, \\\"tracksEditable\\\": true, \\\"exportViewUrl\\\": \\\"/api/v1/viewconfs\\\", \\\"trackSourceServers\\\": [\\\"/api/v1\\\", \\\"http://higlass.io/api/v1\\\"], \\\"views\\\": [{\\\"layout\\\": {\\\"x\\\": 0, \\\"y\\\": 0, \\\"w\\\": 12, \\\"h\\\": 12}, \\\"tracks\\\": {\\\"left\\\": [{\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"bclfJbgmRW63v0wGPkxNpg\\\", \\\"width\\\": 35, \\\"height\\\": 191, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"ZpZ8c5JJRUS1J7ZkofcUrg\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"chromosome-labels\\\", \\\"uid\\\": \\\"Ro-QQ67_Rkqk06XRsWucDw\\\", \\\"width\\\": 35, \\\"height\\\": 191, \\\"options\\\": {\\\"color\\\": \\\"#808080\\\", \\\"stroke\\\": \\\"#ffffff\\\", \\\"fontSize\\\": 12, \\\"fontIsLeftAligned\\\": false, \\\"showMousePosition\\\": false, \\\"mousePositionColor\\\": \\\"#000000\\\", \\\"reverseOrientation\\\": false}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"P5k3z7g2SmqQve0u706Rhg\\\", \\\"width\\\": 44, \\\"height\\\": 191, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"M9A9klpwTci5Vf4bHZ864g\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"horizontal-gene-annotations\\\", \\\"uid\\\": \\\"MqWf0LSMTw2swxMl3SVnhQ\\\", \\\"width\\\": 44, \\\"height\\\": 191, \\\"options\\\": {\\\"fontSize\\\": 8, \\\"labelColor\\\": \\\"black\\\", \\\"labelBackgroundColor\\\": \\\"#ffffff\\\", \\\"labelPosition\\\": \\\"hidden\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"minHeight\\\": 24, \\\"plusStrandColor\\\": \\\"blue\\\", \\\"minusStrandColor\\\": \\\"red\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"showMousePosition\\\": false, \\\"mousePositionColor\\\": \\\"#000000\\\", \\\"geneAnnotationHeight\\\": 8, \\\"geneLabelPosition\\\": \\\"outside\\\", \\\"geneStrandSpacing\\\": 4, \\\"name\\\": \\\"Gene Annotations (hg38)\\\"}}]}, {\\\"tilesetUid\\\": \\\"S2lOCQFBTA6rJJKBOyC80Q\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"vertical-bedlike\\\", \\\"uid\\\": \\\"BVmXcCWrSyuq9ZGI0yaJZw\\\", \\\"width\\\": 21, \\\"height\\\": 191, \\\"options\\\": {\\\"alternating\\\": false, \\\"annotationStyle\\\": \\\"box\\\", \\\"fillColor\\\": \\\"blue\\\", \\\"fillOpacity\\\": 1, \\\"fontSize\\\": \\\"10\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"labelColor\\\": \\\"black\\\", \\\"labelPosition\\\": \\\"hidden\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"minHeight\\\": 20, \\\"maxAnnotationHeight\\\": null, \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"valueColumn\\\": null, \\\"colorEncoding\\\": \\\"itemRgb\\\", \\\"colorEncodingRange\\\": false, \\\"separatePlusMinusStrands\\\": true, \\\"annotationHeight\\\": \\\"scaled\\\", \\\"showTexts\\\": false, \\\"name\\\": \\\"HCT116-RAD21AID (Auxin 6h) Ixn Profile Group: 8_5\\\", \\\"colorRange\\\": [\\\"#000000\\\", \\\"#652537\\\", \\\"#bf5458\\\", \\\"#fba273\\\", \\\"#ffffe0\\\"]}}], \\\"right\\\": [], \\\"top\\\": [{\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"BFm9k6FCTs2FzMlyLj_dJA\\\", \\\"width\\\": 620, \\\"height\\\": 22, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"ZpZ8c5JJRUS1J7ZkofcUrg\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"chromosome-labels\\\", \\\"uid\\\": \\\"M_H2bMOuTYqan0WeaQGFSQ\\\", \\\"width\\\": 620, \\\"height\\\": 22, \\\"options\\\": {\\\"color\\\": \\\"#808080\\\", \\\"stroke\\\": \\\"#ffffff\\\", \\\"fontSize\\\": 12, \\\"fontIsLeftAligned\\\": false, \\\"showMousePosition\\\": false, \\\"mousePositionColor\\\": \\\"#000000\\\", \\\"reverseOrientation\\\": false}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"E1ctEq1zSpaa0dSmH86vsA\\\", \\\"width\\\": 620, \\\"height\\\": 43, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"M9A9klpwTci5Vf4bHZ864g\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"horizontal-gene-annotations\\\", \\\"uid\\\": \\\"XyepNWtER964_y7ndrJt-Q\\\", \\\"width\\\": 620, \\\"height\\\": 43, \\\"options\\\": {\\\"fontSize\\\": 8, \\\"labelColor\\\": \\\"black\\\", \\\"labelBackgroundColor\\\": \\\"#ffffff\\\", \\\"labelPosition\\\": \\\"hidden\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"minHeight\\\": 24, \\\"plusStrandColor\\\": \\\"blue\\\", \\\"minusStrandColor\\\": \\\"red\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"showMousePosition\\\": false, \\\"mousePositionColor\\\": \\\"#000000\\\", \\\"geneAnnotationHeight\\\": 8, \\\"geneLabelPosition\\\": \\\"outside\\\", \\\"geneStrandSpacing\\\": 4, \\\"name\\\": \\\"Gene Annotations (hg38)\\\"}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"IV-KEx7HRkar4iv9KmfqVQ\\\", \\\"width\\\": 620, \\\"height\\\": 10, \\\"options\\\": {}, \\\"contents\\\": []}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"Zjg23WX9QmOJbe99LF0Y_g\\\", \\\"width\\\": 620, \\\"height\\\": 17, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"DvkwT2lkTuakHGrPdKDgig\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"WUrtSYYbRGqRk5oPRRWxiw\\\", \\\"width\\\": 620, \\\"height\\\": 17, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"firebrick\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"SON\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"RUdfnHd3QpGyLriTWC0uVw\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"fC4ri3QSQhukb0AufBe2aA\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"YixjTv7HSAioJKQSwqECkA\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"gold\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"H3K27ac\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"C_LEKom4Rhqm6Jpm7duPzA\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"GYaBTRfGQ9m1okZ_9eZ4Tw\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"RNrgJZBQR5SHwueQ8qmTXg\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"lightgreen\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"H2A.Z\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"M_mAUvYvR3OVqTNHr39CKw\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"NoQ4KdAUTUqVVOzIJDROEw\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"Gs2buLTDQkCPDTF_-ZOvDA\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"seagreen\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"H3K9me2\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"OfGXf-7lTvKgO3VLlN1b5w\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"Q8hXI379SomBxc3-4Eg4Cg\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"ZBltq094QEWzStRGGU4KqA\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"#2980b9\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"H3K27me3\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"MnURIal-S5KpXROcwUtO9Q\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"XWUQrEnoTguqTHAhuGNArg\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"f3EvmUUtQImDM38huY7v-A\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"#4878d0\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"EZH2\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"Dk2oUXy7RvWatKzCdfO9Ng\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"PgzXno3-ROKlyxICR3PUdw\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"Q4FduMeaQZCRANArZXq-Cg\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"purple\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"H3K9me3\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"bfT07zfAQjC8ihWIeNOIig\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"TWZCMdUXSB2h_FeGCi8q5Q\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"NMmTXWikT--gBpSEL96JUA\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"#aaaaaa\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"HP1alpha\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"RXNeN7NVTeqK7ENX2ElAhA\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"BXqoknmRS3GeghQYjU4OmA\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"TWpAThF4SlC8rDN7PF0nRg\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"#777777\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"HP1beta\\\", \\\"labelBackgroundOpacity\\\": 0}}]}, {\\\"tilesetUid\\\": \\\"X1tlRpHkSea0c0kiy-msqA\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"JuYPFc0zSf2ry1WKec659g\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"#000000\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"valueScaleMin\\\": 0, \\\"valueScaleMax\\\": 1, \\\"name\\\": \\\"mCpG\\\"}}, {\\\"tilesetUid\\\": \\\"S2lOCQFBTA6rJJKBOyC80Q\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bedlike\\\", \\\"uid\\\": \\\"P2wjUj-4SjWdLmdtHFACKw\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"alternating\\\": false, \\\"annotationStyle\\\": \\\"box\\\", \\\"fillColor\\\": \\\"blue\\\", \\\"fillOpacity\\\": 1, \\\"fontSize\\\": \\\"10\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"labelColor\\\": \\\"black\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"minHeight\\\": 20, \\\"maxAnnotationHeight\\\": null, \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"valueColumn\\\": null, \\\"colorEncoding\\\": \\\"itemRgb\\\", \\\"showTexts\\\": false, \\\"colorRange\\\": [\\\"#000000\\\", \\\"#652537\\\", \\\"#bf5458\\\", \\\"#fba273\\\", \\\"#ffffe0\\\"], \\\"colorEncodingRange\\\": false, \\\"separatePlusMinusStrands\\\": true, \\\"annotationHeight\\\": \\\"scaled\\\", \\\"name\\\": \\\"Ixn Profile Group\\\"}}], \\\"bottom\\\": [{\\\"tilesetUid\\\": \\\"B71ndFEuSwapYBZ9Oqim_g\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"horizontal-multivec\\\", \\\"uid\\\": \\\"YAZPFEPpTBWttvju08HzrA\\\", \\\"width\\\": 620, \\\"height\\\": 51, \\\"options\\\": {\\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": false, \\\"labelColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"minHeight\\\": 100, \\\"valueScaling\\\": \\\"linear\\\", \\\"valueScaleMin\\\": 0, \\\"valueScaleMax\\\": 1, \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"heatmapValueScaling\\\": \\\"linear\\\", \\\"selectRows\\\": null, \\\"selectRowsAggregationMode\\\": \\\"mean\\\", \\\"selectRowsAggregationWithRelativeHeight\\\": true, \\\"colorbarBackgroundColor\\\": \\\"#ffffff\\\", \\\"colorbarPosition\\\": \\\"topRight\\\", \\\"zeroValueColor\\\": null, \\\"name\\\": \\\"Repli-seq (17 stage)\\\", \\\"scaleStartPercent\\\": \\\"0.00000\\\", \\\"scaleEndPercent\\\": \\\"1.00000\\\", \\\"colorRange\\\": [\\\"rgba(255,255,255,1)\\\", \\\"rgba(0,0,0,1)\\\"], \\\"labelBackgroundOpacity\\\": 0, \\\"selectRowsAggregationMethod\\\": \\\"client\\\"}}, {\\\"tilesetUid\\\": \\\"A7b4zNOCQQyqMRInfLyqdQ\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"divergent-bar\\\", \\\"uid\\\": \\\"Bn0Jo20WREivMkxYOhtelw\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": false, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"blue\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"Repli-seq (2 stage)\\\", \\\"barFillColorBottom\\\": \\\"blue\\\", \\\"barFillColorTop\\\": \\\"red\\\", \\\"labelBackgroundOpacity\\\": 0}}, {\\\"tilesetUid\\\": \\\"dXNJrU3hSROvoixHXt0Dow\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"bar\\\", \\\"uid\\\": \\\"JoaHn9_CS9So76bVSxtaLg\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"tomato\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"Protect-seq\\\"}}, {\\\"tilesetUid\\\": \\\"V0mkPzW7RweuotsV7fwV6Q\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"divergent-bar\\\", \\\"uid\\\": \\\"Yz6u1ezNS3qt2r2kNqbpyQ\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"cornflowerblue\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"LaminB1\\\", \\\"barFillColorBottom\\\": \\\"cornflowerblue\\\", \\\"barFillColorTop\\\": \\\"orangered\\\"}}, {\\\"tilesetUid\\\": \\\"TRuRDJWRQg-4zCJ40nc_Dg\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"divergent-bar\\\", \\\"uid\\\": \\\"B2hXebDgTN252ivw3I_CaA\\\", \\\"width\\\": 620, \\\"height\\\": 20, \\\"options\\\": {\\\"align\\\": \\\"bottom\\\", \\\"labelColor\\\": \\\"[glyph-color]\\\", \\\"labelPosition\\\": \\\"outerLeft\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": false, \\\"labelShowAssembly\\\": true, \\\"axisLabelFormatting\\\": \\\"scientific\\\", \\\"axisPositionHorizontal\\\": \\\"right\\\", \\\"barFillColor\\\": \\\"cornflowerblue\\\", \\\"valueScaling\\\": \\\"linear\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"labelTextOpacity\\\": 1, \\\"barOpacity\\\": 1, \\\"name\\\": \\\"LaminB2\\\", \\\"barFillColorBottom\\\": \\\"cornflowerblue\\\", \\\"barFillColorTop\\\": \\\"orangered\\\"}}], \\\"center\\\": [{\\\"type\\\": \\\"combined\\\", \\\"uid\\\": \\\"D30uV6MeQlOwnSxIOJcd-A\\\", \\\"width\\\": 620, \\\"height\\\": 191, \\\"options\\\": {}, \\\"contents\\\": [{\\\"tilesetUid\\\": \\\"DMsQVKetS5ygjpPIOTmWXQ\\\", \\\"server\\\": \\\"https://resgen.io/api/v1\\\", \\\"type\\\": \\\"heatmap\\\", \\\"uid\\\": \\\"DbT4R_P7Qc69jHv4J8ww9w\\\", \\\"width\\\": 620, \\\"height\\\": 191, \\\"options\\\": {\\\"backgroundColor\\\": \\\"#eeeeee\\\", \\\"labelPosition\\\": \\\"bottomRight\\\", \\\"labelLeftMargin\\\": 0, \\\"labelRightMargin\\\": 0, \\\"labelTopMargin\\\": 0, \\\"labelBottomMargin\\\": 0, \\\"labelShowResolution\\\": true, \\\"labelShowAssembly\\\": true, \\\"colorRange\\\": [\\\"white\\\", \\\"rgba(245,166,35,1.0)\\\", \\\"rgba(208,2,27,1.0)\\\", \\\"black\\\"], \\\"colorbarBackgroundColor\\\": \\\"#ffffff\\\", \\\"maxZoom\\\": null, \\\"minWidth\\\": 100, \\\"minHeight\\\": 100, \\\"colorbarPosition\\\": \\\"topRight\\\", \\\"trackBorderWidth\\\": 0, \\\"trackBorderColor\\\": \\\"black\\\", \\\"heatmapValueScaling\\\": \\\"log\\\", \\\"showMousePosition\\\": true, \\\"mousePositionColor\\\": \\\"#000000\\\", \\\"showTooltip\\\": false, \\\"extent\\\": \\\"full\\\", \\\"zeroValueColor\\\": null, \\\"name\\\": \\\"HCT116 Hi-C\\\", \\\"scaleStartPercent\\\": \\\"0.00006\\\", \\\"scaleEndPercent\\\": \\\"0.73368\\\", \\\"labelBackgroundOpacity\\\": 0, \\\"colorbarBackgroundOpacity\\\": 0}, \\\"transforms\\\": [{\\\"name\\\": \\\"ICE\\\", \\\"value\\\": \\\"weight\\\"}]}]}], \\\"whole\\\": [], \\\"gallery\\\": []}, \\\"uid\\\": \\\"UHMJR3XqTNGuv-vJ0Zds9Q\\\", \\\"initialXDomain\\\": [270132917.6131252, 331245450.03538847], \\\"initialYDomain\\\": [322057785.19580996, 332202756.82111025], \\\"zoomLimits\\\": [1, null]}], \\\"zoomLocks\\\": {\\\"locksByViewUid\\\": {}, \\\"locksDict\\\": {}}, \\\"locationLocks\\\": {\\\"locksByViewUid\\\": {}, \\\"locksDict\\\": {}}, \\\"valueScaleLocks\\\": {\\\"locksByViewUid\\\": {}, \\\"locksDict\\\": {}}}\");\n",
       "\n",
       "    loadHiglass().then(hglib => {\n",
       "        hglib.viewer(el, spec);\n",
       "    })\n",
       "  </script>\n",
       "</body>\n",
       "</html>"
      ],
      "text/plain": [
       "Viewconf(editable=True, viewEditable=True, tracksEditable=True, zoomFixed=None, compactLayout=None, exportViewUrl='/api/v1/viewconfs', trackSourceServers=['/api/v1', 'http://higlass.io/api/v1'], views=[View(layout=Layout(x=0, y=0, w=12, h=12, moved=None, static=None), tracks=Tracks[TrackT](left=[CombinedTrack(type='combined', uid='bclfJbgmRW63v0wGPkxNpg', width=35, height=191, options={}, contents=[EnumTrack(tilesetUid='ZpZ8c5JJRUS1J7ZkofcUrg', server='https://resgen.io/api/v1', type='chromosome-labels', uid='Ro-QQ67_Rkqk06XRsWucDw', width=35, height=191, options={'color': '#808080', 'stroke': '#ffffff', 'fontSize': 12, 'fontIsLeftAligned': False, 'showMousePosition': False, 'mousePositionColor': '#000000', 'reverseOrientation': False}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='P5k3z7g2SmqQve0u706Rhg', width=44, height=191, options={}, contents=[EnumTrack(tilesetUid='M9A9klpwTci5Vf4bHZ864g', server='https://resgen.io/api/v1', type='horizontal-gene-annotations', uid='MqWf0LSMTw2swxMl3SVnhQ', width=44, height=191, options={'fontSize': 8, 'labelColor': 'black', 'labelBackgroundColor': '#ffffff', 'labelPosition': 'hidden', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'minHeight': 24, 'plusStrandColor': 'blue', 'minusStrandColor': 'red', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'showMousePosition': False, 'mousePositionColor': '#000000', 'geneAnnotationHeight': 8, 'geneLabelPosition': 'outside', 'geneStrandSpacing': 4, 'name': 'Gene Annotations (hg38)'}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), EnumTrack(tilesetUid='S2lOCQFBTA6rJJKBOyC80Q', server='https://resgen.io/api/v1', type='vertical-bedlike', uid='BVmXcCWrSyuq9ZGI0yaJZw', width=21, height=191, options={'alternating': False, 'annotationStyle': 'box', 'fillColor': 'blue', 'fillOpacity': 1, 'fontSize': '10', 'axisPositionHorizontal': 'right', 'labelColor': 'black', 'labelPosition': 'hidden', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'minHeight': 20, 'maxAnnotationHeight': None, 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'valueColumn': None, 'colorEncoding': 'itemRgb', 'colorEncodingRange': False, 'separatePlusMinusStrands': True, 'annotationHeight': 'scaled', 'showTexts': False, 'name': 'HCT116-RAD21AID (Auxin 6h) Ixn Profile Group: 8_5', 'colorRange': ['#000000', '#652537', '#bf5458', '#fba273', '#ffffe0']}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], right=[], top=[CombinedTrack(type='combined', uid='BFm9k6FCTs2FzMlyLj_dJA', width=620, height=22, options={}, contents=[EnumTrack(tilesetUid='ZpZ8c5JJRUS1J7ZkofcUrg', server='https://resgen.io/api/v1', type='chromosome-labels', uid='M_H2bMOuTYqan0WeaQGFSQ', width=620, height=22, options={'color': '#808080', 'stroke': '#ffffff', 'fontSize': 12, 'fontIsLeftAligned': False, 'showMousePosition': False, 'mousePositionColor': '#000000', 'reverseOrientation': False}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='E1ctEq1zSpaa0dSmH86vsA', width=620, height=43, options={}, contents=[EnumTrack(tilesetUid='M9A9klpwTci5Vf4bHZ864g', server='https://resgen.io/api/v1', type='horizontal-gene-annotations', uid='XyepNWtER964_y7ndrJt-Q', width=620, height=43, options={'fontSize': 8, 'labelColor': 'black', 'labelBackgroundColor': '#ffffff', 'labelPosition': 'hidden', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'minHeight': 24, 'plusStrandColor': 'blue', 'minusStrandColor': 'red', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'showMousePosition': False, 'mousePositionColor': '#000000', 'geneAnnotationHeight': 8, 'geneLabelPosition': 'outside', 'geneStrandSpacing': 4, 'name': 'Gene Annotations (hg38)'}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='IV-KEx7HRkar4iv9KmfqVQ', width=620, height=10, options={}, contents=[], position=None), CombinedTrack(type='combined', uid='Zjg23WX9QmOJbe99LF0Y_g', width=620, height=17, options={}, contents=[EnumTrack(tilesetUid='DvkwT2lkTuakHGrPdKDgig', server='https://resgen.io/api/v1', type='bar', uid='WUrtSYYbRGqRk5oPRRWxiw', width=620, height=17, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'firebrick', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'SON', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='RUdfnHd3QpGyLriTWC0uVw', width=620, height=20, options={}, contents=[EnumTrack(tilesetUid='fC4ri3QSQhukb0AufBe2aA', server='https://resgen.io/api/v1', type='bar', uid='YixjTv7HSAioJKQSwqECkA', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'gold', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'H3K27ac', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='C_LEKom4Rhqm6Jpm7duPzA', width=620, height=20, options={}, contents=[EnumTrack(tilesetUid='GYaBTRfGQ9m1okZ_9eZ4Tw', server='https://resgen.io/api/v1', type='bar', uid='RNrgJZBQR5SHwueQ8qmTXg', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'lightgreen', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'H2A.Z', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='M_mAUvYvR3OVqTNHr39CKw', width=620, height=20, options={}, contents=[EnumTrack(tilesetUid='NoQ4KdAUTUqVVOzIJDROEw', server='https://resgen.io/api/v1', type='bar', uid='Gs2buLTDQkCPDTF_-ZOvDA', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'seagreen', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'H3K9me2', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='OfGXf-7lTvKgO3VLlN1b5w', width=620, height=20, options={}, contents=[EnumTrack(tilesetUid='Q8hXI379SomBxc3-4Eg4Cg', server='https://resgen.io/api/v1', type='bar', uid='ZBltq094QEWzStRGGU4KqA', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': '#2980b9', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'H3K27me3', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='MnURIal-S5KpXROcwUtO9Q', width=620, height=20, options={}, contents=[EnumTrack(tilesetUid='XWUQrEnoTguqTHAhuGNArg', server='https://resgen.io/api/v1', type='bar', uid='f3EvmUUtQImDM38huY7v-A', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': '#4878d0', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'EZH2', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='Dk2oUXy7RvWatKzCdfO9Ng', width=620, height=20, options={}, contents=[EnumTrack(tilesetUid='PgzXno3-ROKlyxICR3PUdw', server='https://resgen.io/api/v1', type='bar', uid='Q4FduMeaQZCRANArZXq-Cg', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'purple', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'H3K9me3', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='bfT07zfAQjC8ihWIeNOIig', width=620, height=20, options={}, contents=[EnumTrack(tilesetUid='TWZCMdUXSB2h_FeGCi8q5Q', server='https://resgen.io/api/v1', type='bar', uid='NMmTXWikT--gBpSEL96JUA', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': '#aaaaaa', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'HP1alpha', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), CombinedTrack(type='combined', uid='RXNeN7NVTeqK7ENX2ElAhA', width=620, height=20, options={}, contents=[EnumTrack(tilesetUid='BXqoknmRS3GeghQYjU4OmA', server='https://resgen.io/api/v1', type='bar', uid='TWpAThF4SlC8rDN7PF0nRg', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': '#777777', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'HP1beta', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], position=None), EnumTrack(tilesetUid='X1tlRpHkSea0c0kiy-msqA', server='https://resgen.io/api/v1', type='bar', uid='JuYPFc0zSf2ry1WKec659g', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': '#000000', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'valueScaleMin': 0, 'valueScaleMax': 1, 'name': 'mCpG'}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None), EnumTrack(tilesetUid='S2lOCQFBTA6rJJKBOyC80Q', server='https://resgen.io/api/v1', type='bedlike', uid='P2wjUj-4SjWdLmdtHFACKw', width=620, height=20, options={'alternating': False, 'annotationStyle': 'box', 'fillColor': 'blue', 'fillOpacity': 1, 'fontSize': '10', 'axisPositionHorizontal': 'right', 'labelColor': 'black', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'minHeight': 20, 'maxAnnotationHeight': None, 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'valueColumn': None, 'colorEncoding': 'itemRgb', 'showTexts': False, 'colorRange': ['#000000', '#652537', '#bf5458', '#fba273', '#ffffe0'], 'colorEncodingRange': False, 'separatePlusMinusStrands': True, 'annotationHeight': 'scaled', 'name': 'Ixn Profile Group'}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], bottom=[EnumTrack(tilesetUid='B71ndFEuSwapYBZ9Oqim_g', server='https://resgen.io/api/v1', type='horizontal-multivec', uid='YAZPFEPpTBWttvju08HzrA', width=620, height=51, options={'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': False, 'labelColor': 'black', 'labelTextOpacity': 1, 'minHeight': 100, 'valueScaling': 'linear', 'valueScaleMin': 0, 'valueScaleMax': 1, 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'heatmapValueScaling': 'linear', 'selectRows': None, 'selectRowsAggregationMode': 'mean', 'selectRowsAggregationWithRelativeHeight': True, 'colorbarBackgroundColor': '#ffffff', 'colorbarPosition': 'topRight', 'zeroValueColor': None, 'name': 'Repli-seq (17 stage)', 'scaleStartPercent': '0.00000', 'scaleEndPercent': '1.00000', 'colorRange': ['rgba(255,255,255,1)', 'rgba(0,0,0,1)'], 'labelBackgroundOpacity': 0, 'selectRowsAggregationMethod': 'client'}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None), EnumTrack(tilesetUid='A7b4zNOCQQyqMRInfLyqdQ', server='https://resgen.io/api/v1', type='divergent-bar', uid='Bn0Jo20WREivMkxYOhtelw', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': False, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'blue', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'Repli-seq (2 stage)', 'barFillColorBottom': 'blue', 'barFillColorTop': 'red', 'labelBackgroundOpacity': 0}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None), EnumTrack(tilesetUid='dXNJrU3hSROvoixHXt0Dow', server='https://resgen.io/api/v1', type='bar', uid='JoaHn9_CS9So76bVSxtaLg', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'tomato', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'Protect-seq'}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None), EnumTrack(tilesetUid='V0mkPzW7RweuotsV7fwV6Q', server='https://resgen.io/api/v1', type='divergent-bar', uid='Yz6u1ezNS3qt2r2kNqbpyQ', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'cornflowerblue', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'LaminB1', 'barFillColorBottom': 'cornflowerblue', 'barFillColorTop': 'orangered'}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None), EnumTrack(tilesetUid='TRuRDJWRQg-4zCJ40nc_Dg', server='https://resgen.io/api/v1', type='divergent-bar', uid='B2hXebDgTN252ivw3I_CaA', width=620, height=20, options={'align': 'bottom', 'labelColor': '[glyph-color]', 'labelPosition': 'outerLeft', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': False, 'labelShowAssembly': True, 'axisLabelFormatting': 'scientific', 'axisPositionHorizontal': 'right', 'barFillColor': 'cornflowerblue', 'valueScaling': 'linear', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'labelTextOpacity': 1, 'barOpacity': 1, 'name': 'LaminB2', 'barFillColorBottom': 'cornflowerblue', 'barFillColorTop': 'orangered'}, data=None, chromInfoPath=None, fromViewUid=None, x=None, y=None)], center=[CombinedTrack(type='combined', uid='D30uV6MeQlOwnSxIOJcd-A', width=620, height=191, options={}, contents=[HeatmapTrack(tilesetUid='DMsQVKetS5ygjpPIOTmWXQ', server='https://resgen.io/api/v1', type='heatmap', uid='DbT4R_P7Qc69jHv4J8ww9w', width=620, height=191, options={'backgroundColor': '#eeeeee', 'labelPosition': 'bottomRight', 'labelLeftMargin': 0, 'labelRightMargin': 0, 'labelTopMargin': 0, 'labelBottomMargin': 0, 'labelShowResolution': True, 'labelShowAssembly': True, 'colorRange': ['white', 'rgba(245,166,35,1.0)', 'rgba(208,2,27,1.0)', 'black'], 'colorbarBackgroundColor': '#ffffff', 'maxZoom': None, 'minWidth': 100, 'minHeight': 100, 'colorbarPosition': 'topRight', 'trackBorderWidth': 0, 'trackBorderColor': 'black', 'heatmapValueScaling': 'log', 'showMousePosition': True, 'mousePositionColor': '#000000', 'showTooltip': False, 'extent': 'full', 'zeroValueColor': None, 'name': 'HCT116 Hi-C', 'scaleStartPercent': '0.00006', 'scaleEndPercent': '0.73368', 'labelBackgroundOpacity': 0, 'colorbarBackgroundOpacity': 0}, data=None, position=None, transforms=[{'name': 'ICE', 'value': 'weight'}])], position=None)], whole=[], gallery=[]), uid='UHMJR3XqTNGuv-vJ0Zds9Q', autocompleteSource=None, chromInfoPath=None, genomePositionSearchBox=None, genomePositionSearchBoxVisible=None, initialXDomain=(270132917.6131252, 331245450.03538847), initialYDomain=(322057785.19580996, 332202756.82111025), overlays=None, selectionView=None, zoomFixed=None, zoomLimits=(1, None))], zoomLocks=ZoomLocks(locksByViewUid={}, locksDict={}), locationLocks=LocationLocks(locksByViewUid={}, locksDict={}), valueScaleLocks=ValueScaleLocks(locksByViewUid={}, locksDict={}), chromInfoPath=None)"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import higlass as hg\n",
    "conf = hg.Viewconf.from_url(\"https://higlass.io/api/v1/viewconf?d=LT2GVwbmTUWYWoG0yJy5CA\")\n",
    "conf.widget()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6cbc18a2",
   "metadata": {},
   "source": [
    "### Load columnar data for dynamic tileset and jupyter-scatter"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "35724403",
   "metadata": {},
   "outputs": [],
   "source": [
    "from dataclasses import dataclass, field\n",
    "import uuid\n",
    "from PIL import ImageColor\n",
    "\n",
    "import numpy as np\n",
    "import bioframe as bf\n",
    "import pyarrow.parquet\n",
    "import pandas as pd\n",
    "\n",
    "clusters = pd.read_csv(\n",
    "    'https://github.com/open2c/bioframe-poster/blob/main/data/HCT116_Unsynchronized_Auxin360mins.hg38.50000.clusters.E1-E10.eignorm_sqrt.chr1-22.kmeans8_5.tsv?raw=true',\n",
    "    sep=\"\\t\"\n",
    ")\n",
    "\n",
    "eigs = pd.read_parquet(\n",
    "    'https://github.com/open2c/bioframe-poster/blob/main/data/HCT116_Unsynchronized_Auxin360mins.hg38.50000.E0-E128.trans.eigvecs.pq?raw=true',\n",
    "    columns=[\"GC\", \"E0\", \"E1\", \"E2\"],\n",
    ")\n",
    "\n",
    "bins = pd.read_parquet(\n",
    "    'https://github.com/open2c/bioframe-poster/blob/main/data/hg38.bins.50000.pq?raw=true',\n",
    "    columns=[\"centel\"],\n",
    ")\n",
    "\n",
    "df = pd.concat([clusters, eigs, bins], axis=1)\n",
    "df.chrom = df.chrom.astype('category')\n",
    "df.name = df.name.astype('category')\n",
    "df.color = df.color.astype('category')\n",
    "df.dropna(inplace=True)\n",
    "df.reset_index(inplace=True)\n",
    "\n",
    "def get_cmap(df):\n",
    "    d = dict(clusters.groupby([\"name\"]).first()[\"color\"])\n",
    "    return {\n",
    "        k: (h, \",\".join(map(str, ImageColor.getcolor(h, \"RGB\"))))\n",
    "        for k, h in d.items()\n",
    "    }\n",
    "\n",
    "cmap = get_cmap(df)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2d98283f",
   "metadata": {},
   "source": [
    "### Define a custom tileset for HiGlass (`hg`). \n",
    "\n",
    "`Tileset.subset(locs)` takes a set of indices and subsets the inner dataframe, creating a new set of `_tiles` to serve to HiGlass."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "8ff28b48",
   "metadata": {},
   "outputs": [],
   "source": [
    "import uuid\n",
    "\n",
    "# only way I could figure out how to color the tracks correctly\n",
    "def to_bed(chrom, start, end, name, *_):\n",
    "    return [\n",
    "        chrom,\n",
    "        int(start),\n",
    "        int(end),\n",
    "        name,\n",
    "        \".\", # score\n",
    "        \".\", # strand\n",
    "        \".\", \n",
    "        \".\", \n",
    "        cmap[name][1]\n",
    "    ]\n",
    "\n",
    "def get_lens(chromsizes: pd.Series):\n",
    "    abslen = chromsizes.cumsum()\n",
    "    starts = pd.Series([0] + abslen[:-1].tolist(), index=abslen.index)\n",
    "    return dict(starts)\n",
    "\n",
    "def prepare_tiles(df, starts):\n",
    "    tiles = bf.merge(df[[\"chrom\", \"start\", \"end\", \"name\"]], on=[\"name\"])\n",
    "    tiles.dropna(inplace=True)\n",
    "    return [\n",
    "        {\n",
    "            \"chrOffset\": int(starts[l[0]]),\n",
    "            \"xStart\": int(starts[l[0]] + l[1]),\n",
    "            \"xEnd\": int(starts[l[0]] + l[2]),\n",
    "            \"importance\": 0,\n",
    "            \"uid\": str(uuid.uuid4()),\n",
    "            \"fields\": to_bed(*l)\n",
    "        } for l in tiles.to_records(index=False)\n",
    "    ]\n",
    "\n",
    "# Get the trackid/viewid pairs to specify which tracks should be reloaded\n",
    "def get_selectors(view, pos):\n",
    "    return [\n",
    "        {\n",
    "            \"trackId\": t.uid,\n",
    "            \"viewId\": view.uid,\n",
    "        }\n",
    "        for t in getattr(view.tracks, pos)\n",
    "    ]\n",
    "\n",
    "@dataclass\n",
    "class Tileset:\n",
    "    chromsizes: pd.Series\n",
    "    uid: str = field(default_factory=lambda: str(uuid.uuid4()))\n",
    "    datatype = \"bedlike\"\n",
    "        \n",
    "    def __post_init__(self):\n",
    "        self._starts = get_lens(self.chromsizes)\n",
    "        self._tiles = []\n",
    "        \n",
    "    def update(self, df):\n",
    "        self._tiles = prepare_tiles(df, self._starts)\n",
    "\n",
    "        \n",
    "    def info(self):\n",
    "        genome_length = int(np.sum(self.chromsizes.values))\n",
    "        return {\n",
    "            \"uuid\": self.uid,\n",
    "            \"max_width\": genome_length,\n",
    "            \"min_pos\": [1],\n",
    "            \"max_pos\": [genome_length],\n",
    "            \"max_zoom\": 0,\n",
    "        }\n",
    "     \n",
    "    def tiles(self, _tileids):\n",
    "        return [(f\"{self.uid}.0.0\", self._tiles)]\n",
    "        "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0e0a6d0f",
   "metadata": {},
   "source": [
    "### Create custom tileset and add to `hg.server`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "bdbdde6f",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "import higlass as hg\n",
    "from matplotlib.colors import Normalize\n",
    "import jscatter\n",
    "\n",
    "# setup scatterplot\n",
    "s = jscatter.Scatter(x='E1', y='E2', color_by=\"name\", color_map=[v[0] for v in cmap.values()], data=df)\n",
    "\n",
    "# setup tileset\n",
    "chromsizes = bf.fetch_chromsizes('hg38')[:'chrY']\n",
    "t = Tileset(chromsizes)\n",
    "t.update(df)\n",
    "ts = hg.server.add(t)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d894fd27",
   "metadata": {},
   "source": [
    "### Override the tilesets for the clustering track in the original config with our custom tileset"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "b2a96759",
   "metadata": {},
   "outputs": [],
   "source": [
    "# replace tileset for \"cluster\" track with our new tileset\n",
    "conf.views[0].tracks.top[-1].tileset(ts, inplace=True)\n",
    "conf.views[0].tracks.left[-1].tileset(ts, inplace=True)\n",
    "\n",
    "# modify the existing view config \n",
    "conf.views[0].tracks.bottom = [] # erase\n",
    "#conf.views[0].tracks.top = [\n",
    "#    conf.views[0].tracks.top[0],  # chromosome labels\n",
    "#    conf.views[0].tracks.top[1],  # gene annotations\n",
    "#    conf.views[0].tracks.top[-1], # clustering assingment\n",
    "# ]\n",
    "\n",
    "w = conf.widget() # get a higlass widget"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d22747ce",
   "metadata": {},
   "source": [
    "### Callback to link the `HiGlassWidget` with `JScatter`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "d951fe50",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f67771fe74ce4f9db43ae2d2299096ec",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HiGlassWidget()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d496f25ed80f49c79c28bebdf2943727",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(VBox(children=(Button(button_style='primary', icon='arrows', layout=Layout(width='36px'), style…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def on_selection_change(change):\n",
    "    # subset the tileset based on the 50000 bin indices\n",
    "    locs = change[\"new\"]\n",
    "    if len(locs) > 0:\n",
    "        t.update(df.iloc[locs])\n",
    "    # grab the selector for the top clustering track\n",
    "    # BUG: some issue with JS where only one selector is working atm...\n",
    "    reload_selector = get_selectors(conf.views[0], \"top\")[-1]\n",
    "    # have the HiglassWidget reload the clustering track\n",
    "    w.reload(reload_selector)\n",
    "\n",
    "s.widget.observe(on_selection_change, names=\"selection\")\n",
    "display(w, s.show())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9021b8e7",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.10.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}