{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "parameters"
    ]
   },
   "outputs": [],
   "source": [
    "flex_title = \"Illusionist linked widgets\"\n",
    "flex_orientation = \"rows\"\n",
    "flex_subtitle = \"built using jupyter-flex\"\n",
    "flex_include_source = True\n",
    "flex_source_link = \"https://github.com/danielfrg/jupyter-flex/blob/master/examples/illusionist/linked.ipynb\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### jslink"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "source": [
    "This works in regular Jupyter widgets, its all client side."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "source"
    ]
   },
   "outputs": [],
   "source": [
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "range1 = widgets.IntSlider(description='Range 1')\n",
    "range2 = widgets.IntSlider(description='Range 2')\n",
    "\n",
    "l = widgets.jslink((range1, 'value'), (range2, 'value'))\n",
    "display(range1, range2)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### jsdlink"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "source": [
    "This works in regular Jupyter widgets, its all client side."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "source_range = widgets.IntSlider(description='Source range')\n",
    "target_range1 = widgets.IntSlider(description='Target range 1')\n",
    "\n",
    "dl = widgets.jsdlink((source_range, 'value'), (target_range1, 'value'))\n",
    "display(source_range, target_range1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Row 2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### link"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "source": [
    "This requires a kernel. With illusionist we make it all client side.\n",
    "The values of `slider1` and `slider2` are synchronized.\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "sliders1 = widgets.IntSlider(description='Slider 1')\n",
    "slider2 = widgets.IntSlider(description='Slider 2')\n",
    "\n",
    "l = widgets.link((sliders1, 'value'), (slider2, 'value'))\n",
    "display(sliders1, slider2)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### dlink"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "source": [
    "This requires a kernel. With illusionist we make it all client side.\n",
    "\n",
    "The value of `source` will be pushed to `target`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "source = widgets.IntSlider(description='Source')\n",
    "target = widgets.IntSlider(description='Target')\n",
    "\n",
    "dl = widgets.dlink((source, 'value'), (target, 'value'))\n",
    "display(source, target)"
   ]
  },
  {
   "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.8"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "0d36ecf932e843e4b287859291ee0920": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "1209ab18a45e41d8accde61cfdbda166": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "14922a8463db48b6a7b322ff7fa58d79": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "14c44a7d1b604e5cbfc51b4d6536c7f4": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "1d7b8298c9e64eddaf739bd5e10a9f41": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Target",
       "layout": "IPY_MODEL_5660c92048f54ebf9fe1e832d668a69e",
       "style": "IPY_MODEL_14922a8463db48b6a7b322ff7fa58d79"
      }
     },
     "29dd2bcac37c452a87b17ca33d2f681b": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "395337757b874e57a1f0aeac84ba16ff": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "3ada2814773b462c9a97d330a668ee21": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Range 2",
       "layout": "IPY_MODEL_1209ab18a45e41d8accde61cfdbda166",
       "style": "IPY_MODEL_29dd2bcac37c452a87b17ca33d2f681b"
      }
     },
     "3cbbebf19ef84a2fa3e85f3d57cf74c3": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "50b128a449c14244a30f3bb231677ebf": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Target",
       "layout": "IPY_MODEL_d6ebc2b7d7a243329c2863a28b4725bc",
       "style": "IPY_MODEL_681cb4c1a6bf4d808ddbd727aed10546"
      }
     },
     "5660c92048f54ebf9fe1e832d668a69e": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "5f6f2ed0877747838775606cfc854930": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "LinkModel",
      "state": {
       "source": [
        "IPY_MODEL_d4f3c29416ae4189ac42fd0c4b7dd6fc",
        "value"
       ],
       "target": [
        "IPY_MODEL_3ada2814773b462c9a97d330a668ee21",
        "value"
       ]
      }
     },
     "681cb4c1a6bf4d808ddbd727aed10546": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "73fd6fcd15364a3181e54af0a568ae32": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "7494a85bb2074525a5576cbd794670b5": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Source",
       "layout": "IPY_MODEL_9a4f36fdda5c4cce9bd1cf24b617056d",
       "style": "IPY_MODEL_3cbbebf19ef84a2fa3e85f3d57cf74c3"
      }
     },
     "8ff29b1392344181aba91c1c17c412fd": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "903df14841684626866d89be0a73d62f": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "9a4f36fdda5c4cce9bd1cf24b617056d": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "ac82ab6853b94e5db619c6c4f04af323": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "b0825c4034c74fffbea9b5dba34d026e": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Target range 1",
       "layout": "IPY_MODEL_395337757b874e57a1f0aeac84ba16ff",
       "style": "IPY_MODEL_cb52593c69914f39a7accd726bcd6e47"
      }
     },
     "bd046de688a646a58a28341f7412247f": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Slider 2",
       "layout": "IPY_MODEL_e5eda6055a354577a25c4d531693a9f6",
       "style": "IPY_MODEL_cee363560a494e03b0f3f5735cb0aeca"
      }
     },
     "bf9811a70c0a47c3b558963251795f84": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Source",
       "layout": "IPY_MODEL_14c44a7d1b604e5cbfc51b4d6536c7f4",
       "style": "IPY_MODEL_d5bd8cecc9984f039bbdf998be2c5fbf"
      }
     },
     "cb52593c69914f39a7accd726bcd6e47": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "cea10af7de884bd79e6c8d14f77a4de5": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "cee363560a494e03b0f3f5735cb0aeca": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "d4f3c29416ae4189ac42fd0c4b7dd6fc": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Range 1",
       "layout": "IPY_MODEL_903df14841684626866d89be0a73d62f",
       "style": "IPY_MODEL_cea10af7de884bd79e6c8d14f77a4de5"
      }
     },
     "d5bd8cecc9984f039bbdf998be2c5fbf": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "d6ebc2b7d7a243329c2863a28b4725bc": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "dcf31f71979648b9b5f71cfbde7ee294": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Source range",
       "layout": "IPY_MODEL_73fd6fcd15364a3181e54af0a568ae32",
       "style": "IPY_MODEL_ac82ab6853b94e5db619c6c4f04af323"
      }
     },
     "e5eda6055a354577a25c4d531693a9f6": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "e60e7e4a360144efb60c6a8fbe043be8": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "DirectionalLinkModel",
      "state": {
       "source": [
        "IPY_MODEL_dcf31f71979648b9b5f71cfbde7ee294",
        "value"
       ],
       "target": [
        "IPY_MODEL_b0825c4034c74fffbea9b5dba34d026e",
        "value"
       ]
      }
     },
     "f3a2b04b566941148204b5bc3603f1a4": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.5.0",
      "model_name": "IntSliderModel",
      "state": {
       "description": "Slider 1",
       "layout": "IPY_MODEL_8ff29b1392344181aba91c1c17c412fd",
       "style": "IPY_MODEL_0d36ecf932e843e4b287859291ee0920"
      }
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}