Aqueduct/api_interaction.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "toc": "true"
   },
   "source": [
    "<h1>Table of Contents<span class=\"tocSkip\"></span></h1>\n",
    "<div class=\"toc\"><ul class=\"toc-item\"></ul></div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/json": {
       "Software versions": [
        {
         "module": "Python",
         "version": "3.7.4 64bit [Clang 10.0.1 (clang-1001.0.46.4)]"
        },
        {
         "module": "IPython",
         "version": "7.7.0"
        },
        {
         "module": "OS",
         "version": "Darwin 18.7.0 x86_64 i386 64bit"
        },
        {
         "module": "vega",
         "version": "0.5.0"
        },
        {
         "module": "vega3",
         "version": "0.5.0"
        },
        {
         "module": "IPython",
         "version": "7.7.0"
        },
        {
         "module": "ipywidgets",
         "version": "7.5.1"
        },
        {
         "module": "re",
         "version": "2.2.1"
        }
       ]
      },
      "text/html": [
       "<table><tr><th>Software</th><th>Version</th></tr><tr><td>Python</td><td>3.7.4 64bit [Clang 10.0.1 (clang-1001.0.46.4)]</td></tr><tr><td>IPython</td><td>7.7.0</td></tr><tr><td>OS</td><td>Darwin 18.7.0 x86_64 i386 64bit</td></tr><tr><td>vega</td><td>0.5.0</td></tr><tr><td>vega3</td><td>0.5.0</td></tr><tr><td>IPython</td><td>7.7.0</td></tr><tr><td>ipywidgets</td><td>7.5.1</td></tr><tr><td>re</td><td>2.2.1</td></tr><tr><td colspan='2'>Tue Oct 01 12:00:15 2019 CEST</td></tr></table>"
      ],
      "text/latex": [
       "\\begin{tabular}{|l|l|}\\hline\n",
       "{\\bf Software} & {\\bf Version} \\\\ \\hline\\hline\n",
       "Python & 3.7.4 64bit [Clang 10.0.1 (clang-1001.0.46.4)] \\\\ \\hline\n",
       "IPython & 7.7.0 \\\\ \\hline\n",
       "OS & Darwin 18.7.0 x86\\_64 i386 64bit \\\\ \\hline\n",
       "vega & 0.5.0 \\\\ \\hline\n",
       "vega3 & 0.5.0 \\\\ \\hline\n",
       "IPython & 7.7.0 \\\\ \\hline\n",
       "ipywidgets & 7.5.1 \\\\ \\hline\n",
       "re & 2.2.1 \\\\ \\hline\n",
       "\\hline \\multicolumn{2}{|l|}{Tue Oct 01 12:00:15 2019 CEST} \\\\ \\hline\n",
       "\\end{tabular}\n"
      ],
      "text/plain": [
       "Software versions\n",
       "Python 3.7.4 64bit [Clang 10.0.1 (clang-1001.0.46.4)]\n",
       "IPython 7.7.0\n",
       "OS Darwin 18.7.0 x86_64 i386 64bit\n",
       "vega 0.5.0\n",
       "vega3 0.5.0\n",
       "IPython 7.7.0\n",
       "ipywidgets 7.5.1\n",
       "re 2.2.1\n",
       "Tue Oct 01 12:00:15 2019 CEST"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from ipywidgets import interact, interactive, fixed, interact_manual, Layout\n",
    "from traitlets import Unicode, Bool, validate, TraitError\n",
    "import ipywidgets as widgets\n",
    "from ipywidgets import DOMWidget, register\n",
    "from IPython.display import display, HTML, JSON, Code\n",
    "from vega import Vega\n",
    "from vega3 import Vega as Vega3\n",
    "import requests\n",
    "import json\n",
    "import simplejson\n",
    "import re\n",
    "\n",
    "%reload_ext version_information\n",
    "%version_information vega, vega3, IPython, ipywidgets, re"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "code_folding": [
     1
    ]
   },
   "outputs": [],
   "source": [
    "AQvegaTheme=\"\"\"\n",
    "{\n",
    "  \"background\":\"#fff\",\n",
    "  \"render\": {\"retina\": true},\n",
    "  \"axis\": {\n",
    "    \"layer\": \"back\",\n",
    "    \"ticks\": 5,\n",
    "    \"axisColor\": \"transparent\",\n",
    "    \"axisWidth\": 1,\n",
    "    \"gridColor\": \"#eeeeee\",\n",
    "    \"gridOpacity\": 1,\n",
    "    \"tickColor\": \"#eeeeee\",\n",
    "    \"tickLabelColor\": \"#758290\",\n",
    "    \"tickWidth\": 0,\n",
    "    \"tickSize\": 10,\n",
    "    \"tickLabelFontSize\": 12,\n",
    "    \"tickLabelFont\": \"\\\"Roboto\\\"\",\n",
    "    \"tickOffset\": 0,\n",
    "    \"titleFont\": \"\\\"Roboto\\\"\",\n",
    "    \"titleFontSize\": 12,\n",
    "    \"titleFontWeight\": \"regular\",\n",
    "    \"titleColor\": \"#758290\",\n",
    "    \"titleOffset\": \"auto\",\n",
    "    \"titleOffsetAutoMin\": 0,\n",
    "    \"titleOffsetAutoMax\": 0,\n",
    "    \"titleOffsetAutoMargin\": 0\n",
    "  },\n",
    "  \"legend\": {\n",
    "    \"orient\": \"left\",\n",
    "    \"padding\": 0,\n",
    "    \"margin\": 0,\n",
    "    \"labelColor\": \"#758290\",\n",
    "    \"labelFontSize\": 12,\n",
    "    \"labelFont\": \"\\\"Roboto\\\"\",\n",
    "    \"labelAlign\": \"left\",\n",
    "    \"labelBaseline\": \"Bottom\",\n",
    "    \"labelOffset\": 0,\n",
    "    \"symbolShape\": \"line\",\n",
    "    \"symbolSize\": 2,\n",
    "    \"symbolStrokeWidth\": 0,\n",
    "    \"titleFont\": \"\\\"Roboto\\\"\",\n",
    "    \"titleFontSize\": 12,\n",
    "    \"titleFontWeight\": \"medium\",\n",
    "    \"titleColor\": \"#758290\"\n",
    "  },\n",
    "  \"color\": {\n",
    "    \"rgb\": [128,128,128],\n",
    "    \"lab\": [50,0,0],\n",
    "    \"hcl\": [0,0,50],\n",
    "    \"hsl\": [0,0,0.5]\n",
    "  },\n",
    "  \"range\": {\n",
    "    \"cropColor\":[\n",
    "      \"#3d6ac4\",\n",
    "      \"#749be9\",\n",
    "      \"#51d4f0\",\n",
    "      \"#b1f3b7\",\n",
    "      \"#24962e\"\n",
    "    ],\n",
    "    \"riskColor\":[\n",
    "      \"#808080\",\n",
    "      \"#FFFF99\",\n",
    "      \"#FFE600\",\n",
    "      \"#FF9900\",\n",
    "      \"#FF1900\",\n",
    "      \"#990000\"\n",
    "    ],\n",
    "    \"shapes\": [\n",
    "      \"circle\",\n",
    "      \"cross\",\n",
    "      \"diamond\",\n",
    "      \"square\",\n",
    "      \"triangle-down\",\n",
    "      \"triangle-up\",\n",
    "      \"line\",\n",
    "      \"textMark\"\n",
    "    ],\n",
    "    \"cropCatColor\": [\n",
    "      \"#C71585\",\n",
    "      \"#0000FF\",\n",
    "      \"#A52A2A\",\n",
    "      \"#FFA500\",\n",
    "      \"#6B8E23\",\n",
    "      \"#FFDAB9\",\n",
    "      \"#E6E6FA\",\n",
    "      \"#8B4513\",\n",
    "      \"#008000\",\n",
    "      \"#2F4F4F\"\n",
    "    ]\n",
    "  }\n",
    "}\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "code_folding": [
     1
    ]
   },
   "outputs": [],
   "source": [
    "@register\n",
    "class CodeArea(DOMWidget):\n",
    "    _view_name = Unicode('CodeView').tag(sync=True)\n",
    "    _view_module = Unicode('CodeArea_widget').tag(sync=True)\n",
    "    _view_module_version = Unicode('0.1.0').tag(sync=True)\n",
    "\n",
    "    # Attributes\n",
    "    value = Unicode('codeAreaHere', help=\"Code area here\").tag(sync=True)\n",
    "    disabled = Bool(False, help=\"Enable or disable user changes.\").tag(sync=True)\n",
    "    \n",
    "    #methods\n",
    "    def clear(self):\n",
    "        self.value = ''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "code_folding": [
     0
    ]
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<style>\n",
    ".CodeMirror {\n",
    "  /* Set height, width, borders, and global font properties here */\n",
    "  font-family: monospace;\n",
    "  height: 300px;\n",
    "  color: black;\n",
    "  direction: ltr;\n",
    "}\n",
    "\n",
    "/* PADDING */\n",
    "\n",
    ".CodeMirror-lines {\n",
    "  padding: 4px 0; /* Vertical padding around content */\n",
    "}\n",
    ".CodeMirror pre {\n",
    "  padding: 0 4px; /* Horizontal padding of content */\n",
    "}\n",
    "\n",
    ".CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {\n",
    "  background-color: white; /* The little square between H and V scrollbars */\n",
    "}\n",
    "\n",
    "/* GUTTER */\n",
    "\n",
    ".CodeMirror-gutters {\n",
    "  border-right: 1px solid #ddd;\n",
    "  background-color: #f7f7f7;\n",
    "  white-space: nowrap;\n",
    "}\n",
    ".CodeMirror-linenumbers {}\n",
    ".CodeMirror-linenumber {\n",
    "  padding: 0 3px 0 5px;\n",
    "  min-width: 20px;\n",
    "  text-align: right;\n",
    "  color: #999;\n",
    "  white-space: nowrap;\n",
    "}\n",
    "\n",
    ".CodeMirror-guttermarker { color: black; }\n",
    ".CodeMirror-guttermarker-subtle { color: #999; }\n",
    "\n",
    "/* CURSOR */\n",
    "\n",
    ".CodeMirror-cursor {\n",
    "  border-left: 1px solid black;\n",
    "  border-right: none;\n",
    "  width: 0;\n",
    "}\n",
    "/* Shown when moving in bi-directional text */\n",
    ".CodeMirror div.CodeMirror-secondarycursor {\n",
    "  border-left: 1px solid silver;\n",
    "}\n",
    ".cm-fat-cursor .CodeMirror-cursor {\n",
    "  width: auto;\n",
    "  border: 0 !important;\n",
    "  background: #7e7;\n",
    "}\n",
    ".cm-fat-cursor div.CodeMirror-cursors {\n",
    "  z-index: 1;\n",
    "}\n",
    ".cm-fat-cursor-mark {\n",
    "  background-color: rgba(20, 255, 20, 0.5);\n",
    "  -webkit-animation: blink 1.06s steps(1) infinite;\n",
    "  -moz-animation: blink 1.06s steps(1) infinite;\n",
    "  animation: blink 1.06s steps(1) infinite;\n",
    "}\n",
    ".cm-animate-fat-cursor {\n",
    "  width: auto;\n",
    "  border: 0;\n",
    "  -webkit-animation: blink 1.06s steps(1) infinite;\n",
    "  -moz-animation: blink 1.06s steps(1) infinite;\n",
    "  animation: blink 1.06s steps(1) infinite;\n",
    "  background-color: #7e7;\n",
    "}\n",
    "@-moz-keyframes blink {\n",
    "  0% {}\n",
    "  50% { background-color: transparent; }\n",
    "  100% {}\n",
    "}\n",
    "@-webkit-keyframes blink {\n",
    "  0% {}\n",
    "  50% { background-color: transparent; }\n",
    "  100% {}\n",
    "}\n",
    "@keyframes blink {\n",
    "  0% {}\n",
    "  50% { background-color: transparent; }\n",
    "  100% {}\n",
    "}\n",
    "\n",
    "/* Can style cursor different in overwrite (non-insert) mode */\n",
    ".CodeMirror-overwrite .CodeMirror-cursor {}\n",
    "\n",
    ".cm-tab { display: inline-block; text-decoration: inherit; }\n",
    "\n",
    ".CodeMirror-rulers {\n",
    "  position: absolute;\n",
    "  left: 0; right: 0; top: -50px; bottom: 0;\n",
    "  overflow: hidden;\n",
    "}\n",
    ".CodeMirror-ruler {\n",
    "  border-left: 1px solid #ccc;\n",
    "  top: 0; bottom: 0;\n",
    "  position: absolute;\n",
    "}\n",
    "\n",
    "/* DEFAULT THEME */\n",
    "\n",
    ".cm-s-default .cm-header {color: blue;}\n",
    ".cm-s-default .cm-quote {color: #090;}\n",
    ".cm-negative {color: #d44;}\n",
    ".cm-positive {color: #292;}\n",
    ".cm-header, .cm-strong {font-weight: bold;}\n",
    ".cm-em {font-style: italic;}\n",
    ".cm-link {text-decoration: underline;}\n",
    ".cm-strikethrough {text-decoration: line-through;}\n",
    "\n",
    ".cm-s-default .cm-keyword {color: #708;}\n",
    ".cm-s-default .cm-atom {color: #219;}\n",
    ".cm-s-default .cm-number {color: #164;}\n",
    ".cm-s-default .cm-def {color: #00f;}\n",
    ".cm-s-default .cm-variable,\n",
    ".cm-s-default .cm-punctuation,\n",
    ".cm-s-default .cm-property,\n",
    ".cm-s-default .cm-operator {}\n",
    ".cm-s-default .cm-variable-2 {color: #05a;}\n",
    ".cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}\n",
    ".cm-s-default .cm-comment {color: #a50;}\n",
    ".cm-s-default .cm-string {color: #a11;}\n",
    ".cm-s-default .cm-string-2 {color: #f50;}\n",
    ".cm-s-default .cm-meta {color: #555;}\n",
    ".cm-s-default .cm-qualifier {color: #555;}\n",
    ".cm-s-default .cm-builtin {color: #30a;}\n",
    ".cm-s-default .cm-bracket {color: #997;}\n",
    ".cm-s-default .cm-tag {color: #170;}\n",
    ".cm-s-default .cm-attribute {color: #00c;}\n",
    ".cm-s-default .cm-hr {color: #999;}\n",
    ".cm-s-default .cm-link {color: #00c;}\n",
    "\n",
    ".cm-s-default .cm-error {color: #f00;}\n",
    ".cm-invalidchar {color: #f00;}\n",
    "\n",
    ".CodeMirror-composing { border-bottom: 2px solid; }\n",
    "\n",
    "/* Default styles for common addons */\n",
    "\n",
    "div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}\n",
    "div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}\n",
    ".CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }\n",
    ".CodeMirror-activeline-background {background: #e8f2ff;}\n",
    "\n",
    "/* STOP */\n",
    "\n",
    "/* The rest of this file contains styles related to the mechanics of\n",
    "   the editor. You probably shouldn't touch them. */\n",
    "\n",
    ".CodeMirror {\n",
    "  position: relative;\n",
    "  overflow: hidden;\n",
    "  background: white;\n",
    "}\n",
    "\n",
    ".CodeMirror-scroll {\n",
    "  overflow: scroll !important; /* Things will break if this is overridden */\n",
    "  /* 30px is the magic margin used to hide the element's real scrollbars */\n",
    "  /* See overflow: hidden in .CodeMirror */\n",
    "  margin-bottom: -30px; margin-right: -30px;\n",
    "  padding-bottom: 30px;\n",
    "  height: 100%;\n",
    "  outline: none; /* Prevent dragging from highlighting the element */\n",
    "  position: relative;\n",
    "}\n",
    ".CodeMirror-sizer {\n",
    "  position: relative;\n",
    "  border-right: 30px solid transparent;\n",
    "}\n",
    "\n",
    "/* The fake, visible scrollbars. Used to force redraw during scrolling\n",
    "   before actual scrolling happens, thus preventing shaking and\n",
    "   flickering artifacts. */\n",
    ".CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {\n",
    "  position: absolute;\n",
    "  z-index: 6;\n",
    "  display: none;\n",
    "}\n",
    ".CodeMirror-vscrollbar {\n",
    "  right: 0; top: 0;\n",
    "  overflow-x: hidden;\n",
    "  overflow-y: scroll;\n",
    "}\n",
    ".CodeMirror-hscrollbar {\n",
    "  bottom: 0; left: 0;\n",
    "  overflow-y: hidden;\n",
    "  overflow-x: scroll;\n",
    "}\n",
    ".CodeMirror-scrollbar-filler {\n",
    "  right: 0; bottom: 0;\n",
    "}\n",
    ".CodeMirror-gutter-filler {\n",
    "  left: 0; bottom: 0;\n",
    "}\n",
    "\n",
    ".CodeMirror-gutters {\n",
    "  position: absolute; left: 0; top: 0;\n",
    "  min-height: 100%;\n",
    "  z-index: 3;\n",
    "}\n",
    ".CodeMirror-gutter {\n",
    "  white-space: normal;\n",
    "  height: 100%;\n",
    "  display: inline-block;\n",
    "  vertical-align: top;\n",
    "  margin-bottom: -30px;\n",
    "}\n",
    ".CodeMirror-gutter-wrapper {\n",
    "  position: absolute;\n",
    "  z-index: 4;\n",
    "  background: none !important;\n",
    "  border: none !important;\n",
    "}\n",
    ".CodeMirror-gutter-background {\n",
    "  position: absolute;\n",
    "  top: 0; bottom: 0;\n",
    "  z-index: 4;\n",
    "}\n",
    ".CodeMirror-gutter-elt {\n",
    "  position: absolute;\n",
    "  cursor: default;\n",
    "  z-index: 4;\n",
    "}\n",
    ".CodeMirror-gutter-wrapper ::selection { background-color: transparent }\n",
    ".CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }\n",
    "\n",
    ".CodeMirror-lines {\n",
    "  cursor: text;\n",
    "  min-height: 1px; /* prevents collapsing before first draw */\n",
    "}\n",
    ".CodeMirror pre {\n",
    "  /* Reset some styles that the rest of the page might have set */\n",
    "  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;\n",
    "  border-width: 0;\n",
    "  background: transparent;\n",
    "  font-family: inherit;\n",
    "  font-size: inherit;\n",
    "  margin: 0;\n",
    "  white-space: pre;\n",
    "  word-wrap: normal;\n",
    "  line-height: inherit;\n",
    "  color: inherit;\n",
    "  z-index: 2;\n",
    "  position: relative;\n",
    "  overflow: visible;\n",
    "  -webkit-tap-highlight-color: transparent;\n",
    "  -webkit-font-variant-ligatures: contextual;\n",
    "  font-variant-ligatures: contextual;\n",
    "}\n",
    ".CodeMirror-wrap pre {\n",
    "  word-wrap: break-word;\n",
    "  white-space: pre-wrap;\n",
    "  word-break: normal;\n",
    "}\n",
    "\n",
    ".CodeMirror-linebackground {\n",
    "  position: absolute;\n",
    "  left: 0; right: 0; top: 0; bottom: 0;\n",
    "  z-index: 0;\n",
    "}\n",
    "\n",
    ".CodeMirror-linewidget {\n",
    "  position: relative;\n",
    "  z-index: 2;\n",
    "  padding: 0.1px; /* Force widget margins to stay inside of the container */\n",
    "}\n",
    "\n",
    ".CodeMirror-widget {}\n",
    "\n",
    ".CodeMirror-rtl pre { direction: rtl; }\n",
    "\n",
    ".CodeMirror-code {\n",
    "  outline: none;\n",
    "}\n",
    "\n",
    "/* Force content-box sizing for the elements where we expect it */\n",
    ".CodeMirror-scroll,\n",
    ".CodeMirror-sizer,\n",
    ".CodeMirror-gutter,\n",
    ".CodeMirror-gutters,\n",
    ".CodeMirror-linenumber {\n",
    "  -moz-box-sizing: content-box;\n",
    "  box-sizing: content-box;\n",
    "}\n",
    "\n",
    ".CodeMirror-measure {\n",
    "  position: absolute;\n",
    "  width: 100%;\n",
    "  height: 0;\n",
    "  overflow: hidden;\n",
    "  visibility: hidden;\n",
    "}\n",
    "\n",
    ".CodeMirror-cursor {\n",
    "  position: absolute;\n",
    "  pointer-events: none;\n",
    "}\n",
    ".CodeMirror-measure pre { position: static; }\n",
    "\n",
    "div.CodeMirror-cursors {\n",
    "  visibility: hidden;\n",
    "  position: relative;\n",
    "  z-index: 3;\n",
    "}\n",
    "div.CodeMirror-dragcursors {\n",
    "  visibility: visible;\n",
    "}\n",
    "\n",
    ".CodeMirror-focused div.CodeMirror-cursors {\n",
    "  visibility: visible;\n",
    "}\n",
    "\n",
    ".CodeMirror-selected { background: #d9d9d9; }\n",
    ".CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }\n",
    ".CodeMirror-crosshair { cursor: crosshair; }\n",
    ".CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }\n",
    ".CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }\n",
    "\n",
    ".cm-searching {\n",
    "  background-color: #ffa;\n",
    "  background-color: rgba(255, 255, 0, .4);\n",
    "}\n",
    "\n",
    "/* Used to force a border model for a node */\n",
    ".cm-force-border { padding-right: .1px; }\n",
    "\n",
    "@media print {\n",
    "  /* Hide the cursor when printing */\n",
    "  .CodeMirror div.CodeMirror-cursors {\n",
    "    visibility: hidden;\n",
    "  }\n",
    "}\n",
    "\n",
    "/* See issue #2901 */\n",
    ".cm-tab-wrap-hack:after { content: ''; }\n",
    "\n",
    "/* Help users use markselection to safely style text background */\n",
    "span.CodeMirror-selectedtext { background: none; }\n",
    "</style>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "code_folding": [
     0
    ]
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.undef('CodeArea_widget');\n",
       "\n",
       "\n",
       "\n",
       "var CodeMirror = require('codemirror/lib/codemirror');\n",
       "require('codemirror/mode/javascript/javascript');\n",
       "//require('codemirror/theme/monokai.css');\n",
       "\n",
       "\n",
       "\n",
       "define('CodeArea_widget', [\"@jupyter-widgets/base\"], function(widgets) {\n",
       "    \n",
       "    var CodeModel = widgets.DOMWidgetModel.extend({\n",
       "    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {\n",
       "        _model_name: 'DrawingModel',\n",
       "        _view_name: 'DrawingView',\n",
       "        _model_module: 'jupyter-drawing-pad',\n",
       "        _view_module: 'jupyter-drawing-pad',\n",
       "        _model_module_version: '0.1.6',\n",
       "        _view_module_version: '0.1.6',\n",
       "        value: 'Hello World',\n",
       "\n",
       "    })\n",
       "});\n",
       "    \n",
       "    var CodeView = widgets.DOMWidgetView.extend({\n",
       "\n",
       "        // Render the view.\n",
       "        render: function() {\n",
       "            this.code_input = document.createElement('textarea');\n",
       "            \n",
       "            this.code_input.id = 'code';\n",
       "            this.code_input.value = this.model.get('value');\n",
       "            this.code_input.disabled = this.model.get('disabled');\n",
       "            //this.code_input.setAttribute('name', 'post');\n",
       "            //this.code_input.setAttribute('maxlength', 5000);\n",
       "            //this.code_input.setAttribute('cols',80);\n",
       "            //this.code_input.setAttribute('rows', 40);\n",
       "            \n",
       "\n",
       "            // Python -> JavaScript update\n",
       "            this.model.on('change:value', this.value_changed, this);\n",
       "            this.model.on('change:disabled', this.disabled_changed, this);\n",
       "\n",
       "            // JavaScript -> Python update\n",
       "            this.code_input.onchange = this.input_changed.bind(this);\n",
       "            this.code_input.onchange = function() {\n",
       "                console.log(this)\n",
       "            }\n",
       "            \n",
       "            this.el.appendChild(this.code_input);\n",
       "            \n",
       "            //use the codemirror to build up custom textarea\n",
       "            CodeMirror.fromTextArea(this.code_input, {\n",
       "              mode: 'javascript',\n",
       "              lineWrapping: true,\n",
       "              extraKeys: {\n",
       "                'Ctrl-Space': 'autocomplete'\n",
       "              },\n",
       "              lineNumbers: true,\n",
       "              theme: 'monokai',\n",
       "              cursorScrollMargin: 5\n",
       "            });\n",
       "\n",
       "        },\n",
       "\n",
       "        value_changed: function() {\n",
       "            this.code_input.value = this.model.get('value');\n",
       "        },\n",
       "\n",
       "        disabled_changed: function() {\n",
       "            this.code_input.disabled = this.model.get('disabled');\n",
       "        },\n",
       "\n",
       "        input_changed: function() {\n",
       "            this.model.set('value', this.code_input.value);\n",
       "            console.log(this.code_input.value)\n",
       "            this.model.save_changes();\n",
       "        },\n",
       "    });\n",
       "    \n",
       "\n",
       "    return {\n",
       "        CodeModel: CodeModel,\n",
       "        CodeView: CodeView\n",
       "    };\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.undef('CodeArea_widget');\n",
    "\n",
    "\n",
    "\n",
    "var CodeMirror = require('codemirror/lib/codemirror');\n",
    "require('codemirror/mode/javascript/javascript');\n",
    "//require('codemirror/theme/monokai.css');\n",
    "\n",
    "\n",
    "\n",
    "define('CodeArea_widget', [\"@jupyter-widgets/base\"], function(widgets) {\n",
    "    \n",
    "    var CodeModel = widgets.DOMWidgetModel.extend({\n",
    "    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {\n",
    "        _model_name: 'DrawingModel',\n",
    "        _view_name: 'DrawingView',\n",
    "        _model_module: 'jupyter-drawing-pad',\n",
    "        _view_module: 'jupyter-drawing-pad',\n",
    "        _model_module_version: '0.1.6',\n",
    "        _view_module_version: '0.1.6',\n",
    "        value: 'Hello World',\n",
    "\n",
    "    })\n",
    "});\n",
    "    \n",
    "    var CodeView = widgets.DOMWidgetView.extend({\n",
    "\n",
    "        // Render the view.\n",
    "        render: function() {\n",
    "            this.code_input = document.createElement('textarea');\n",
    "            \n",
    "            this.code_input.id = 'code';\n",
    "            this.code_input.value = this.model.get('value');\n",
    "            this.code_input.disabled = this.model.get('disabled');\n",
    "            //this.code_input.setAttribute('name', 'post');\n",
    "            //this.code_input.setAttribute('maxlength', 5000);\n",
    "            //this.code_input.setAttribute('cols',80);\n",
    "            //this.code_input.setAttribute('rows', 40);\n",
    "            \n",
    "\n",
    "            // Python -> JavaScript update\n",
    "            this.model.on('change:value', this.value_changed, this);\n",
    "            this.model.on('change:disabled', this.disabled_changed, this);\n",
    "\n",
    "            // JavaScript -> Python update\n",
    "            this.code_input.onchange = this.input_changed.bind(this);\n",
    "            this.code_input.onchange = function() {\n",
    "                console.log(this)\n",
    "            }\n",
    "            \n",
    "            this.el.appendChild(this.code_input);\n",
    "            \n",
    "            //use the codemirror to build up custom textarea\n",
    "            CodeMirror.fromTextArea(this.code_input, {\n",
    "              mode: 'javascript',\n",
    "              lineWrapping: true,\n",
    "              extraKeys: {\n",
    "                'Ctrl-Space': 'autocomplete'\n",
    "              },\n",
    "              lineNumbers: true,\n",
    "              theme: 'monokai',\n",
    "              cursorScrollMargin: 5\n",
    "            });\n",
    "\n",
    "        },\n",
    "\n",
    "        value_changed: function() {\n",
    "            this.code_input.value = this.model.get('value');\n",
    "        },\n",
    "\n",
    "        disabled_changed: function() {\n",
    "            this.code_input.disabled = this.model.get('disabled');\n",
    "        },\n",
    "\n",
    "        input_changed: function() {\n",
    "            this.model.set('value', this.code_input.value);\n",
    "            console.log(this.code_input.value)\n",
    "            this.model.save_changes();\n",
    "        },\n",
    "    });\n",
    "    \n",
    "\n",
    "    return {\n",
    "        CodeModel: CodeModel,\n",
    "        CodeView: CodeView\n",
    "    };\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9be1b06ef7f94e10b2ff906a461e30ce",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CodeArea(value='blalblablab')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "codear=CodeArea(value = 'blalblablab')\n",
    "codear"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9be1b06ef7f94e10b2ff906a461e30ce",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "CodeArea(value='blalblablab')"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "codear"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [],
   "source": [
    "def patchWidget(widgetId, datasetId, body):\n",
    "    return\n",
    "def formatObj(inputKey: dict, predefineKeys: dict)-> list:\n",
    "    \"\"\"\n",
    "    converts input dictionary on regex definition for parsing parameters\n",
    "    Output:\n",
    "\n",
    "        object2format_Global= [\n",
    "       {'pattern':r\"({{([^}}]*)(year)}})\", 'sub':'2010'},\n",
    "       {'pattern':r\"({{([^}}]*)(water_column)}})\", 'sub':'ws2028tl'},\n",
    "       {'pattern':r\"({{([^}}]*)(crop)}})\", 'sub':'banana'},\n",
    "        {'pattern':r\"({{([^}}]*)(commodity)}})\", 'sub':'banana'},\n",
    "       {'pattern':r\"({{([^}}]*)(iso)}})\", 'sub':'ESP'},\n",
    "        {'pattern':r\"({{([^}}]*)(countryName)}})\", 'sub':'Spain'}\n",
    "                   ]\n",
    "    \"\"\"\n",
    "    \n",
    "    object2format=[]\n",
    "    if 'sql_config' in inputKey:\n",
    "        for i in inputKey['sql_config']:\n",
    "            sentence = [\"{0} = {1}\".format(word['key'],predefineKeys[word['key']]) if word['key'] in ('year') else \"{0} = '{1}'\".format(word['key'],predefineKeys[word['key']]) for word in i['key_params']]\n",
    "            \n",
    "            \n",
    "            object2format.append({'pattern':r\"({{([^}}]*)(\"+i['key']+\")}})\", 'sub': '{1} {0} '.format(' and '.join(sentence), i['key'])})\n",
    "        \n",
    "    if 'params_config' in inputKey:\n",
    "         for i in inputKey['params_config']:\n",
    "            object2format.append({'pattern':r\"({{([^}}]*)(\"+i['key']+\")}})\", 'sub': str(predefineKeys[i['key']])})\n",
    "    return object2format\n",
    "\n",
    "\n",
    "def formatWidget2read(widgetConfig):\n",
    "    object2format= [\n",
    "       {'pattern':r\"({{([^}}]*)(year)}})\", 'sub':'2020'},\n",
    "       {'pattern':r\"({{([^}}]*)(water_column)}})\", 'sub':'ws2028tl'},\n",
    "       {'pattern':r\"({{([^}}]*)(crop)}})\", 'sub':'banana'},\n",
    "        {'pattern':r\"({{([^}}]*)(commodity)}})\", 'sub':'banana'},\n",
    "       {'pattern':r\"({{([^}}]*)(iso)}})\", 'sub':'BRA'},\n",
    "        {'pattern':r\"({{([^}}]*)(countryName)}})\", 'sub':'Brasil'}\n",
    "                   ]\n",
    "    \n",
    "    n=json.dumps(widgetConfig)\n",
    "    for paterns in object2format:\n",
    "        n = re.compile(paterns['pattern']).sub(paterns['sub'], n)\n",
    "    return json.loads(n)\n",
    "\n",
    "def getWidgets(env, app, lsize):\n",
    "    widgetsUrl=f'{env}/v1/widget?app={app}&page[size]={lsize}'\n",
    "    return requests.get(widgetsUrl)\n",
    "\n",
    "def getAWidget(env, widgetId):\n",
    "    widgetUrl=f'{env}/v1/widget/{widgetId}'\n",
    "    return requests.get(widgetUrl)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "metadata": {
    "code_folding": [],
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f833e611022b44d3a45c872832d67652",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "AppLayout(children=(HBox(children=(VBox(children=(Dropdown(description='Env: ', options={'Production': 'https:…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "\n",
    "def app():\n",
    "    #define dropdown widgets\n",
    "    wApp=widgets.Dropdown(\n",
    "        options={'Resource Watch': 'rw', 'Aqueduct': 'aqueduct', 'Prep': 'prep'},\n",
    "        value='aqueduct',\n",
    "        description='App: ',\n",
    "    )\n",
    "    wEnv=widgets.Dropdown(\n",
    "        options={'Production': 'https://api.resourcewatch.org', 'Staging': 'https://staging-api.globalforestwatch.org'},\n",
    "        value='https://api.resourcewatch.org',\n",
    "        description='Env: ',\n",
    "    )\n",
    "    wsize=widgets.IntSlider(min=1, max=1e3, step=1,continuous_update=False, value=1000)\n",
    "\n",
    "    wWidgets=widgets.Dropdown(\n",
    "        description='widget: ',\n",
    "    )\n",
    "    \n",
    "    box_layout = Layout(display='flex',\n",
    "                        flex_flow='column',\n",
    "                        height='300px',\n",
    "                        width='300px')\n",
    "    wCodeBox= CodeArea(\n",
    "        value='',\n",
    "        placeholder='Type something',\n",
    "        description='Widget:',\n",
    "        disabled=False,\n",
    "        layout=box_layout\n",
    "    )\n",
    "    wCodeBox2= widgets.Textarea(\n",
    "        value='',\n",
    "        placeholder='Type something',\n",
    "        description='Widget Id:',\n",
    "        disabled=False\n",
    "    )\n",
    "    wCodeBox3= widgets.Textarea(\n",
    "        value='',\n",
    "        placeholder='Type something',\n",
    "        description='Dataset Id:',\n",
    "        disabled=False\n",
    "    )\n",
    "    codeArea = widgets.Output()\n",
    "    \n",
    "    def f(env, app, lsize, codeAreas, swidget_id):\n",
    "\n",
    "        r = getWidgets(env, app, lsize)\n",
    "        if r.status_code == 200:\n",
    "            opt = {widget['attributes']['name']: widget['id'] for widget in r.json()['data']}\n",
    "\n",
    "            wWidgets.options = opt\n",
    "\n",
    "            s = getAWidget(env, swidget_id)\n",
    "\n",
    "            if s.status_code == 200:\n",
    "                mywidget = s.json()['data']['attributes']['widgetConfig']\n",
    "                mywidget['width']=300\n",
    "                mywidget['height']=300\n",
    "                if app=='aqueduct':\n",
    "                    mywidget['padding']=\"auto\"\n",
    "                    #mywidget['viewport']=[300,300]\n",
    "                    display(Vega(formatWidget2read(mywidget)))\n",
    "                    wCodeBox.value = json.dumps(mywidget, sort_keys=True, indent=2)\n",
    "                    wCodeBox2.value = swidget_id\n",
    "                    wCodeBox3.value = s.json()['data']['attributes']['dataset']\n",
    "                else:\n",
    "                    #wCodeBox.value = json.dumps(mywidget)\n",
    "                    wCodeBox2.value = swidget_id\n",
    "                    wCodeBox3.value = s.json()['data']['attributes']['dataset']\n",
    "                    display(Vega3(mywidget))\n",
    "\n",
    "    out = widgets.interactive_output(f, {'env':wEnv, 'app': wApp, 'lsize':wsize, 'codeAreas':wCodeBox,'swidget_id':wWidgets})\n",
    "    ui = widgets.VBox([widgets.HBox([wApp,wsize]),wWidgets,widgets.HBox([wCodeBox,widgets.VBox([wCodeBox3,wCodeBox2,codeArea]),out])])\n",
    "    #ui = widgets.VBox([widgets.HBox([wApp,wsize]),wWidgets,widgets.HBox([codeArea,widgets.VBox([wCodeBox3,wCodeBox2]),out])])\n",
    "    header = widgets.HBox([widgets.VBox([wEnv,wWidgets]), widgets.VBox([wApp,wsize])])\n",
    "    app = widgets.AppLayout(header=header,\n",
    "          left_sidebar=wCodeBox,\n",
    "          center=out,\n",
    "          footer=None)\n",
    "    return app\n",
    "    #out.observe(handle_slider_change, names='All')\n",
    "app()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "hide_input": false,
  "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.4"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {
    "height": "12px",
    "width": "252px"
   },
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": true,
   "toc_position": {
    "height": "calc(100% - 180px)",
    "left": "10px",
    "top": "150px",
    "width": "165px"
   },
   "toc_section_display": "block",
   "toc_window_display": true
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "00b8490be3974eeca00ef59423ea325d": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "0577f0ca442f471a894a62e059b14a60": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DropdownModel",
      "state": {
       "_options_labels": [
        "Growing crops under water stress conditions.",
        "Change over time in percent of irrigated {{commodity}} area exposed to high water stress",
        "Percentage of {{crop_name}} area that {{year_verb}}",
        "Country Water Risk Exposure and Risk of Hunger",
        "Average global change in water stress for irrigated crops through 2040",
        "Irrigated vs Rainfed",
        "Single growing crop under high water stress conditions",
        "Change over time in irrigated {{crop_name}} area exposed to water stress and rainfed {{crop_name}} area exposed to seasonal variability in {{countryName}}",
        "Percent of crop area by level of water stress and volume of demand",
        "Water stress by month",
        "Rainfall by month",
        "Percentage of country's population at high risk of hunger.",
        "World Price (USD/Ton)",
        "Country Water Risk Exposure and Risk of Hunger (all crops, water stress, baseline)",
        "Average global change in seasonal variability for rainfed crops through 2040",
        "Kilocalories per capita",
        "Change over time in percent of rainfed {{crop}} area at high risk of seasonal variability.",
        "Water stress over {{crop}} crop area",
        "Seasonal variability",
        "Percent of crop area by level of water stress and volume of demand in {{countryName}}",
        "Volume of production, food demand, and net trade",
        "Crops growing under high water stress conditions in a country",
        "Summary table, total crops production area",
        "Top 5 net importers and net exporters of {{commodity}}",
        "Top 10 countries with highest ag water stress scores",
        "Top 10 countries with highest ag drought severity risk scores",
        "Top 5 countries with the greatest projected irrigated yield increases through {{year}}",
        "Top 10 countries with highest ag water stress scores for {{crop_name}}",
        "Top 10 countries with the highest {{crop_name}} drought severity risk scores",
        "Global {{commodity}} yield, area, production, price, and demand change over time",
        "Top 5 countries with greatest projected increase in rainfed {{commodity}} production.",
        "Water stress of top 5 {{commodity}}-producing countries",
        "Groundwater tables declined percentage in areas where a crop is grown since 1990",
        "On average, risk of water stress will increase in areas where [crop] is grown by x% through [future year selected].",
        "On average, risk of seasonal variability will increase in areas where [crop] is grown by x% through [future year selected].",
        "On average, groundwater tables have declined by x% in areas where [crop] is grown since 1990.",
        "On average, risk of water stress will increase in areas where a crop is grown through [future year selected].",
        "On average, risk of seasonal variability will increase in areas where a crop is grown through [future year selected].",
        "Change in net trade over time for top 5 crops in highest demand in {{countryName}}",
        "{{crop_name}} yield, area, production, and demand change over time in {{countryName}}",
        "Change in {{countryName}}’s net trade of {{commodity}} over time",
        "Percentage of crop production area by water risk in {{year}}",
        "Percentage of global production area of {{commodity}} by water risk in {{year}}",
        "Percentage of crop production area by water risk in {{year}} in {{countryName}}",
        "Percentage of {{commodity}} production area by water risk in {{year}} in {{countryName}}"
       ],
       "description": "Choose widgets:",
       "index": 0,
       "layout": "IPY_MODEL_4bbece9b5e67468dbcc0321d83f9e68c",
       "style": "IPY_MODEL_f927fe0d364c4d96ad976d465b0ac16d"
      }
     },
     "07a3975458314a95b8a35e2938ba0d23": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "VBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_867e2389280248e8a3719202357ec546",
        "IPY_MODEL_0577f0ca442f471a894a62e059b14a60",
        "IPY_MODEL_f8119d7a8d7f4d0ca6383c708213f3e7"
       ],
       "layout": "IPY_MODEL_319493cc28ad42ac9428365a6eca0e9c"
      }
     },
     "0d2384cc552143f2965a2c350f661bcf": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "1542de640c5b46558e3f9da36b3a4bdf": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "1bcf2acb520f4df286cfbdc2a8a2ed0e": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "1feef19599604f7d9c970c80ab8ba827": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "279b0490ed6844f2af1c367c4f3c53eb": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "29e72bd8e9804e7eb95554a429c9140e": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DropdownModel",
      "state": {
       "_options_labels": [
        "Growing crops under water stress conditions.",
        "Change over time in percent of irrigated {{commodity}} area exposed to high water stress",
        "Percentage of {{crop_name}} area that {{year_verb}}",
        "Country Water Risk Exposure and Risk of Hunger",
        "Average global change in water stress for irrigated crops through 2040",
        "Irrigated vs Rainfed",
        "Single growing crop under high water stress conditions",
        "Change over time in irrigated {{crop_name}} area exposed to water stress and rainfed {{crop_name}} area exposed to seasonal variability in {{countryName}}",
        "Percent of crop area by level of water stress and volume of demand",
        "Water stress by month",
        "Rainfall by month",
        "Percentage of country's population at high risk of hunger.",
        "World Price (USD/Ton)",
        "Country Water Risk Exposure and Risk of Hunger (all crops, water stress, baseline)",
        "Average global change in seasonal variability for rainfed crops through 2040",
        "Kilocalories per capita",
        "Change over time in percent of rainfed {{crop}} area at high risk of seasonal variability.",
        "Water stress over {{crop}} crop area",
        "Seasonal variability",
        "Percent of crop area by level of water stress and volume of demand in {{countryName}}",
        "Volume of production, food demand, and net trade",
        "Crops growing under high water stress conditions in a country",
        "Summary table, total crops production area",
        "Top 5 net importers and net exporters of {{commodity}}",
        "Top 10 countries with highest ag water stress scores",
        "Top 10 countries with highest ag drought severity risk scores",
        "Top 5 countries with the greatest projected irrigated yield increases through {{year}}",
        "Top 10 countries with highest ag water stress scores for {{crop_name}}",
        "Top 10 countries with the highest {{crop_name}} drought severity risk scores",
        "Global {{commodity}} yield, area, production, price, and demand change over time",
        "Top 5 countries with greatest projected increase in rainfed {{commodity}} production.",
        "Water stress of top 5 {{commodity}}-producing countries",
        "Groundwater tables declined percentage in areas where a crop is grown since 1990",
        "On average, risk of water stress will increase in areas where [crop] is grown by x% through [future year selected].",
        "On average, risk of seasonal variability will increase in areas where [crop] is grown by x% through [future year selected].",
        "On average, groundwater tables have declined by x% in areas where [crop] is grown since 1990.",
        "On average, risk of water stress will increase in areas where a crop is grown through [future year selected].",
        "On average, risk of seasonal variability will increase in areas where a crop is grown through [future year selected].",
        "Change in net trade over time for top 5 crops in highest demand in {{countryName}}",
        "{{crop_name}} yield, area, production, and demand change over time in {{countryName}}",
        "Change in {{countryName}}’s net trade of {{commodity}} over time",
        "Percentage of crop production area by water risk in {{year}}",
        "Percentage of global production area of {{commodity}} by water risk in {{year}}",
        "Percentage of crop production area by water risk in {{year}} in {{countryName}}",
        "Percentage of {{commodity}} production area by water risk in {{year}} in {{countryName}}"
       ],
       "description": "Choose widgets:",
       "index": 0,
       "layout": "IPY_MODEL_d6cdf527f7cc4c0c831b17c65a180170",
       "style": "IPY_MODEL_9b831ab3bf1444e3871da987fa317a3c"
      }
     },
     "319493cc28ad42ac9428365a6eca0e9c": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "3874deca7ea54304aef760f6053f44a0": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "3c3c9c80262643a38063827b2198574f": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "3c53d9b018f147ef825c9e18f7f10254": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "439524654cdb45abac8cf1e39e11f29c": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {
       "display": "flex",
       "flex_flow": "column",
       "height": "500px",
       "width": "auto"
      }
     },
     "45446630928948729e42fc97b65f720a": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "4bbece9b5e67468dbcc0321d83f9e68c": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "5565309f24dc4fde9218bf1697da975a": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "56017182c76243c5972876fb07f5a0db": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "5679e64f50434431842e3454c69d3d27": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DropdownModel",
      "state": {
       "_options_labels": [
        "Resource Watch",
        "Aqueduct",
        "Prep"
       ],
       "description": "Choose Aaplication:",
       "index": 1,
       "layout": "IPY_MODEL_279b0490ed6844f2af1c367c4f3c53eb",
       "style": "IPY_MODEL_65fe9912d54a4a9fbb6c9da4561d4bd9"
      }
     },
     "597cffb50fb2455983be224cb5bd9d03": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "5a0bc03a63c34a48befdc6e13f867a0b": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "5ef49aee87534edeb4a9e1a8334ec64e": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "63534d80dae841c58f38966aab0355ad": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "65fe9912d54a4a9fbb6c9da4561d4bd9": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "66f324b3b5f84bb5bc99c289fdcfd100": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "TextareaModel",
      "state": {
       "description": "Dataset Id:",
       "layout": "IPY_MODEL_1feef19599604f7d9c970c80ab8ba827",
       "placeholder": "Type something",
       "style": "IPY_MODEL_e9e0fa7b32f0418f9b9ff536f7ea6864",
       "value": "3f09c3eb-c259-4af0-9015-7077290fe6e8"
      }
     },
     "69cf92bf9ca140d08bd2d21a523a7f9d": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "6addd26acc5145d3b712fb7120fb94b6": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "TextareaModel",
      "state": {
       "description": "Widget Id:",
       "layout": "IPY_MODEL_69cf92bf9ca140d08bd2d21a523a7f9d",
       "placeholder": "Type something",
       "style": "IPY_MODEL_fc192ca3062041788e9fffa232fd79d8"
      }
     },
     "6c3902da9dd24229af684192cbfde5ee": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "HBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_c58513b0df954962a6bf773542f42745",
        "IPY_MODEL_b40a08b345d04aac8e3d70c0c47fbd60",
        "IPY_MODEL_8c4f6518c25642fd92300fb2da14d981"
       ],
       "layout": "IPY_MODEL_1542de640c5b46558e3f9da36b3a4bdf"
      }
     },
     "6dd08c58af654b908ee835d9fad0a6d5": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "7152d786e45e4425bf549efa2601b5d2": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "778d086c9650424e9e397d483ab7335f": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "IntSliderModel",
      "state": {
       "continuous_update": false,
       "layout": "IPY_MODEL_5ef49aee87534edeb4a9e1a8334ec64e",
       "max": 1000,
       "min": 1,
       "style": "IPY_MODEL_3874deca7ea54304aef760f6053f44a0",
       "value": 1000
      }
     },
     "7ff2ac7d7ac54a0bb4498916ab748b89": {
      "model_module": "@jupyter-widgets/output",
      "model_module_version": "1.0.0",
      "model_name": "OutputModel",
      "state": {
       "layout": "IPY_MODEL_fbcca329edcf4653aa2804b6e50fff69",
       "outputs": [
        {
         "data": {
          "text/html": "<div class=\"vega-embed\" id=\"46f2b9e4-66aa-48c9-a562-c3cbb2094811\"></div>\n\n<style>\n.vega-embed svg, .vega-embed canvas {\n  border: 1px dotted gray;\n}\n\n.vega-embed .vega-actions a {\n  margin-right: 6px;\n}\n</style>\n"
         },
         "metadata": {
          "jupyter-vega": "#46f2b9e4-66aa-48c9-a562-c3cbb2094811"
         },
         "output_type": "display_data"
        },
        {
         "data": {
          "application/javascript": "var spec = {\"data\": {\"url\": \"https://wri-01.carto.com/api/v2/sql?q=with a as(SELECT area, basinid, cell5m, crop, iso, name_cntr as country FROM crops {{where}} and irrigation='irrigated'), b as (SELECT basinid, ws2028tr, ws3028tr, ws4028tr, wsbs00tr FROM aqueduct_projections_20150309), agrr as (select a.basinid, a.crop, a.iso, b.ws2028tr, b.ws3028tr, b.ws4028tr, b.wsbs00tr, a.area as area_a, a.country from a,b where a.basinid=b.basinid), y_2010 as (select crop as commodity, iso, sum(area_a) as area_a, country from agrr where wsbs00tr>=4 group by iso, crop, country), y_2020 as (select crop as commodity, iso, sum(area_a) as area_a, country from agrr where ws2028tr>=4 group by iso, crop, country), y_2030 as (select crop as commodity, iso, sum(area_a) as area_a, country from agrr where ws3028tr>=4 group by iso, crop, country), y_2040 as (select crop as commodity, iso, sum(area_a) as area_a, country from agrr where ws4028tr>=4 group by iso, crop, country), result as (select iso, commodity, area_a as value, 2010 as year, country from y_2010 union all select iso, commodity, area_a as value, 2020 as year, country from y_2020 union all select iso, commodity, area_a as value, 2030 as year, country from y_2030 union all select iso, commodity, area_a as value, 2040 as year, country from y_2040), final_res as (select year, commodity, iso, value, country from result where year=2020) SELECT case when year > 2010 then 'will be' else 'are' end as verb, case when year > 2010 then 'in ' || to_char(year, '9999') else '' end as year, commodity, iso, value, country from final_res\"}, \"type\": \"text\", \"template\": \"There ##verb## an estimated ##value## hectares of irrigated ##commodity## growing under high water stress conditions ##year## in ##country##.\", \"sql_config\": [{\"key_params\": [{\"required\": true, \"key\": \"crop\"}, {\"required\": true, \"key\": \"iso\"}], \"key\": \"where\"}], \"params_config\": [{\"key\": \"year\", \"required\": true}], \"template_config\": [{\"key\": \"verb\"}, {\"key\": \"value\", \"format\": \".2s\"}, {\"key\": \"commodity\"}, {\"key\": \"year\"}, {\"key\": \"country\"}], \"width\": 300, \"height\": 300};\nvar selector = \"#46f2b9e4-66aa-48c9-a562-c3cbb2094811\";\nvar type = \"vega\";\n\nvar output_area = this;\nrequire(['nbextensions/jupyter-vega/index'], function(vega) {\n  vega.render(selector, spec, type, output_area);\n}, function (err) {\n  if (err.requireType !== 'scripterror') {\n    throw(err);\n  }\n});\n"
         },
         "metadata": {
          "jupyter-vega": "#46f2b9e4-66aa-48c9-a562-c3cbb2094811"
         },
         "output_type": "display_data"
        }
       ]
      }
     },
     "867e2389280248e8a3719202357ec546": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "HBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_f95bbe9c056441d1aba6b28ba18c8b05",
        "IPY_MODEL_87694651042447ba86e4679a417478c7"
       ],
       "layout": "IPY_MODEL_00b8490be3974eeca00ef59423ea325d"
      }
     },
     "87694651042447ba86e4679a417478c7": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "IntSliderModel",
      "state": {
       "continuous_update": false,
       "layout": "IPY_MODEL_63534d80dae841c58f38966aab0355ad",
       "max": 1000,
       "min": 1,
       "style": "IPY_MODEL_f71479771f764e95a17b7f9a354d3f51",
       "value": 1000
      }
     },
     "8c4f6518c25642fd92300fb2da14d981": {
      "model_module": "@jupyter-widgets/output",
      "model_module_version": "1.0.0",
      "model_name": "OutputModel",
      "state": {
       "layout": "IPY_MODEL_6dd08c58af654b908ee835d9fad0a6d5",
       "outputs": [
        {
         "ename": "NameError",
         "evalue": "name 'formatWidget2read' is not defined",
         "output_type": "error",
         "traceback": [
          "\u001b[0;31m----------------------------------------------------------------\u001b[0m",
          "\u001b[0;31mNameError\u001b[0m                      Traceback (most recent call last)",
          "\u001b[0;32m~/miniconda3/lib/python3.6/site-packages/ipywidgets/widgets/interaction.py\u001b[0m in \u001b[0;36mobserver\u001b[0;34m(change)\u001b[0m\n\u001b[1;32m     72\u001b[0m         \u001b[0;32mwith\u001b[0m \u001b[0mout\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     73\u001b[0m             \u001b[0mclear_output\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mwait\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;32mTrue\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m---> 74\u001b[0;31m             \u001b[0mf\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m**\u001b[0m\u001b[0mkwargs\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m     75\u001b[0m             \u001b[0mshow_inline_matplotlib_plots\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     76\u001b[0m     \u001b[0;32mfor\u001b[0m \u001b[0mk\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0mw\u001b[0m \u001b[0;32min\u001b[0m \u001b[0mcontrols\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mitems\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
          "\u001b[0;32m<ipython-input-2-584944970237>\u001b[0m in \u001b[0;36mf\u001b[0;34m(x, y, z, w)\u001b[0m\n\u001b[1;32m     49\u001b[0m             \u001b[0mmywidget\u001b[0m\u001b[0;34m[\u001b[0m\u001b[0;34m'height'\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m=\u001b[0m\u001b[0;36m300\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     50\u001b[0m             \u001b[0;32mif\u001b[0m \u001b[0mx\u001b[0m\u001b[0;34m==\u001b[0m\u001b[0;34m'aqueduct'\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m---> 51\u001b[0;31m                 \u001b[0mdisplay\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mVega\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mformatWidget2read\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mmywidget\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m     52\u001b[0m                 \u001b[0mwCodeBox\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mvalue\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mjson\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mdumps\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mmywidget\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m     53\u001b[0m                 \u001b[0mwCodeBox2\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mvalue\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mz\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
          "\u001b[0;31mNameError\u001b[0m: name 'formatWidget2read' is not defined"
         ]
        }
       ]
      }
     },
     "97a7b12128704ebfaf54e34110c452a9": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "9b831ab3bf1444e3871da987fa317a3c": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "9c5affd55f464cb49ba3cb6c72107f05": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "VBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_66f324b3b5f84bb5bc99c289fdcfd100",
        "IPY_MODEL_dca6231292bb407d9720c8b25f1a2e27"
       ],
       "layout": "IPY_MODEL_56017182c76243c5972876fb07f5a0db"
      }
     },
     "b40a08b345d04aac8e3d70c0c47fbd60": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "VBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_cdcfc27d308e4db3826255582fee151b",
        "IPY_MODEL_6addd26acc5145d3b712fb7120fb94b6"
       ],
       "layout": "IPY_MODEL_e3a43e26b2f64f1ab6df74fc5e2b8443"
      }
     },
     "bf08a19bd62d46f8a2e31a38421fa956": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "c1168adb94b24199bf13682df987edc3": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "TextareaModel",
      "state": {
       "description": "Widget:",
       "layout": "IPY_MODEL_439524654cdb45abac8cf1e39e11f29c",
       "placeholder": "Type something",
       "style": "IPY_MODEL_0d2384cc552143f2965a2c350f661bcf",
       "value": "{\"data\": {\"url\": \"https://wri-01.carto.com/api/v2/sql?q=with a as(SELECT area, basinid, cell5m, crop, iso, name_cntr as country FROM crops {{where}} and irrigation='irrigated'), b as (SELECT basinid, ws2028tr, ws3028tr, ws4028tr, wsbs00tr FROM aqueduct_projections_20150309), agrr as (select a.basinid, a.crop, a.iso, b.ws2028tr, b.ws3028tr, b.ws4028tr, b.wsbs00tr, a.area as area_a, a.country from a,b where a.basinid=b.basinid), y_2010 as (select crop as commodity, iso, sum(area_a) as area_a, country from agrr where wsbs00tr>=4 group by iso, crop, country), y_2020 as (select crop as commodity, iso, sum(area_a) as area_a, country from agrr where ws2028tr>=4 group by iso, crop, country), y_2030 as (select crop as commodity, iso, sum(area_a) as area_a, country from agrr where ws3028tr>=4 group by iso, crop, country), y_2040 as (select crop as commodity, iso, sum(area_a) as area_a, country from agrr where ws4028tr>=4 group by iso, crop, country), result as (select iso, commodity, area_a as value, 2010 as year, country from y_2010 union all select iso, commodity, area_a as value, 2020 as year, country from y_2020 union all select iso, commodity, area_a as value, 2030 as year, country from y_2030 union all select iso, commodity, area_a as value, 2040 as year, country from y_2040), final_res as (select year, commodity, iso, value, country from result where year={{year}}) SELECT case when year > 2010 then 'will be' else 'are' end as verb, case when year > 2010 then 'in ' || to_char(year, '9999') else '' end as year, commodity, iso, value, country from final_res\"}, \"type\": \"text\", \"template\": \"There ##verb## an estimated ##value## hectares of irrigated ##commodity## growing under high water stress conditions ##year## in ##country##.\", \"sql_config\": [{\"key_params\": [{\"required\": true, \"key\": \"crop\"}, {\"required\": true, \"key\": \"iso\"}], \"key\": \"where\"}], \"params_config\": [{\"key\": \"year\", \"required\": true}], \"template_config\": [{\"key\": \"verb\"}, {\"key\": \"value\", \"format\": \".2s\"}, {\"key\": \"commodity\"}, {\"key\": \"year\"}, {\"key\": \"country\"}], \"width\": 300, \"height\": 300}"
      }
     },
     "c375b69cf32d4742a2c3d9d0adc59561": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "HBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_5679e64f50434431842e3454c69d3d27",
        "IPY_MODEL_778d086c9650424e9e397d483ab7335f"
       ],
       "layout": "IPY_MODEL_5a0bc03a63c34a48befdc6e13f867a0b"
      }
     },
     "c58513b0df954962a6bf773542f42745": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "TextareaModel",
      "state": {
       "description": "Widget:",
       "layout": "IPY_MODEL_f4d1fce6585d4f54afa1a047aa5dffd2",
       "placeholder": "Type something",
       "style": "IPY_MODEL_3c53d9b018f147ef825c9e18f7f10254"
      }
     },
     "cdcfc27d308e4db3826255582fee151b": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "TextareaModel",
      "state": {
       "description": "Dataset Id:",
       "layout": "IPY_MODEL_bf08a19bd62d46f8a2e31a38421fa956",
       "placeholder": "Type something",
       "style": "IPY_MODEL_597cffb50fb2455983be224cb5bd9d03"
      }
     },
     "d3328f4a2ac6435f8cf31c718cf76925": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "VBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_c375b69cf32d4742a2c3d9d0adc59561",
        "IPY_MODEL_29e72bd8e9804e7eb95554a429c9140e",
        "IPY_MODEL_6c3902da9dd24229af684192cbfde5ee"
       ],
       "layout": "IPY_MODEL_45446630928948729e42fc97b65f720a"
      }
     },
     "d6cdf527f7cc4c0c831b17c65a180170": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "dca6231292bb407d9720c8b25f1a2e27": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "TextareaModel",
      "state": {
       "description": "Widget Id:",
       "layout": "IPY_MODEL_5565309f24dc4fde9218bf1697da975a",
       "placeholder": "Type something",
       "style": "IPY_MODEL_97a7b12128704ebfaf54e34110c452a9",
       "value": "049f074a-3528-427d-922b-3c2320e9caf6"
      }
     },
     "e3a43e26b2f64f1ab6df74fc5e2b8443": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "e9e0fa7b32f0418f9b9ff536f7ea6864": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "f4d1fce6585d4f54afa1a047aa5dffd2": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {
       "display": "flex",
       "flex_flow": "column",
       "height": "500px",
       "width": "auto"
      }
     },
     "f71479771f764e95a17b7f9a354d3f51": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "SliderStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "f8119d7a8d7f4d0ca6383c708213f3e7": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "HBoxModel",
      "state": {
       "children": [
        "IPY_MODEL_c1168adb94b24199bf13682df987edc3",
        "IPY_MODEL_9c5affd55f464cb49ba3cb6c72107f05",
        "IPY_MODEL_7ff2ac7d7ac54a0bb4498916ab748b89"
       ],
       "layout": "IPY_MODEL_7152d786e45e4425bf549efa2601b5d2"
      }
     },
     "f927fe0d364c4d96ad976d465b0ac16d": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     },
     "f95bbe9c056441d1aba6b28ba18c8b05": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DropdownModel",
      "state": {
       "_options_labels": [
        "Resource Watch",
        "Aqueduct",
        "Prep"
       ],
       "description": "Choose Aaplication:",
       "index": 1,
       "layout": "IPY_MODEL_1bcf2acb520f4df286cfbdc2a8a2ed0e",
       "style": "IPY_MODEL_3c3c9c80262643a38063827b2198574f"
      }
     },
     "fbcca329edcf4653aa2804b6e50fff69": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.0.0",
      "model_name": "LayoutModel",
      "state": {}
     },
     "fc192ca3062041788e9fffa232fd79d8": {
      "model_module": "@jupyter-widgets/controls",
      "model_module_version": "1.2.0",
      "model_name": "DescriptionStyleModel",
      "state": {
       "description_width": ""
      }
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}