InteractivePreferences.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "// Immediately-invoked-function-expression to avoid global variables.\n",
       "(function() {\n",
       "    var warning_div = document.getElementById(\"webio-warning-14703410759447423283\");\n",
       "    var hide = function () {\n",
       "        var script = document.getElementById(\"webio-setup-4420278991992093927\");\n",
       "        var parent = script && script.parentElement;\n",
       "        var grandparent = parent && parent.parentElement;\n",
       "        if (grandparent) {\n",
       "            grandparent.style.display = \"none\";\n",
       "        }\n",
       "        warning_div.style.display = \"none\";\n",
       "    };\n",
       "    if (typeof Jupyter !== \"undefined\") {\n",
       "        console.log(\"WebIO detected Jupyter notebook environment.\");\n",
       "        // Jupyter notebook.\n",
       "        var extensions = (\n",
       "            Jupyter\n",
       "            && Jupyter.notebook.config.data\n",
       "            && Jupyter.notebook.config.data.load_extensions\n",
       "        );\n",
       "        if (extensions && extensions[\"webio/main\"]) {\n",
       "            // Extension already loaded.\n",
       "            console.log(\"Jupyter WebIO nbextension detected; not loading ad-hoc.\");\n",
       "            hide();\n",
       "            return;\n",
       "        }\n",
       "        console.warn(\"Loading WebIO Jupyter extension on an ad-hoc basis. Consider enabling the WebIO nbextension for a stabler experience (this should happen automatically when building WebIO).\");\n",
       "        require([\"/assetserver/c385fdc7d10f18f4d98690a365566345f1f1f076-dist/main.js\"], function (webIOModule) {\n",
       "            webIOModule.load_ipython_extension();\n",
       "        });\n",
       "        warning_div.innerHTML = \"<strong>Loading WebIO Jupyter extension on an ad-hoc basis. Consider enabling the WebIO nbextension for a stabler experience (this should happen automatically when building WebIO).</strong>\";\n",
       "    } else if (window.location.pathname.includes(\"/lab\")) {\n",
       "        // Guessing JupyterLa\n",
       "        console.log(\"Jupyter Lab detected; make sure the @webio/jupyter-lab-provider labextension is installed.\");\n",
       "        hide();\n",
       "        return;\n",
       "    }\n",
       "})();\n",
       "\n",
       "</script>\n",
       "<div\n",
       "    id=\"webio-warning-14703410759447423283\"\n",
       "    class=\"output_text output_stderr\"\n",
       "    style=\"padding: 1em; font-weight: bold;\"\n",
       ">\n",
       "    Unable to load WebIO. Please make sure WebIO works for your Jupyter client.\n",
       "    <!-- TODO: link to installation docs. -->\n",
       "</div>\n"
      ],
      "text/plain": [
       "HTML{String}(\"<script>\\n// Immediately-invoked-function-expression to avoid global variables.\\n(function() {\\n    var warning_div = document.getElementById(\\\"webio-warning-14703410759447423283\\\");\\n    var hide = function () {\\n        var script = document.getElementById(\\\"webio-setup-4420278991992093927\\\");\\n        var parent = script && script.parentElement;\\n        var grandparent = parent && parent.parentElement;\\n        if (grandparent) {\\n            grandparent.style.display = \\\"none\\\";\\n        }\\n        warning_div.style.display = \\\"none\\\";\\n    };\\n    if (typeof Jupyter !== \\\"undefined\\\") {\\n        console.log(\\\"WebIO detected Jupyter notebook environment.\\\");\\n        // Jupyter notebook.\\n        var extensions = (\\n            Jupyter\\n            && Jupyter.notebook.config.data\\n            && Jupyter.notebook.config.data.load_extensions\\n        );\\n        if (extensions && extensions[\\\"webio/main\\\"]) {\\n            // Extension already loaded.\\n            console.log(\\\"Jupyter WebIO nbextension detected; not loading ad-hoc.\\\");\\n            hide();\\n            return;\\n        }\\n        console.warn(\\\"Loading WebIO Jupyter extension on an ad-hoc basis. Consider enabling the WebIO nbextension for a stabler experience (this should happen automatically when building WebIO).\\\");\\n        require([\\\"/assetserver/c385fdc7d10f18f4d98690a365566345f1f1f076-dist/main.js\\\"], function (webIOModule) {\\n            webIOModule.load_ipython_extension();\\n        });\\n        warning_div.innerHTML = \\\"<strong>Loading WebIO Jupyter extension on an ad-hoc basis. Consider enabling the WebIO nbextension for a stabler experience (this should happen automatically when building WebIO).</strong>\\\";\\n    } else if (window.location.pathname.includes(\\\"/lab\\\")) {\\n        // Guessing JupyterLa\\n        console.log(\\\"Jupyter Lab detected; make sure the @webio/jupyter-lab-provider labextension is installed.\\\");\\n        hide();\\n        return;\\n    }\\n})();\\n\\n</script>\\n<div\\n    id=\\\"webio-warning-14703410759447423283\\\"\\n    class=\\\"output_text output_stderr\\\"\\n    style=\\\"padding: 1em; font-weight: bold;\\\"\\n>\\n    Unable to load WebIO. Please make sure WebIO works for your Jupyter client.\\n    <!-- TODO: link to installation docs. -->\\n</div>\\n\")"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "┌ Info: Loading DataFrames support into Gadfly.jl\n",
      "└ @ Gadfly /Users/sydneykatz/.julia/packages/Gadfly/09PWZ/src/mapping.jl:228\n"
     ]
    }
   ],
   "source": [
    "include(\"interactive_reward_iteration.jl\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "┌ Warning: newid(prefix) is deprecated. Scopes don't need this anymore. To get the scope's id, use scopeid(scope)\n",
      "│   caller = ip:0x0\n",
      "└ @ Core :-1\n",
      "┌ Warning: `Scope(; id, kwargs...)` is deprecated, use `Scope(kwargs...)` instead.\n",
      "│   caller = ip:0x0\n",
      "└ @ Core :-1\n",
      "┌ Warning: Accessing scope.id is deprecated; use scopeid(scope) instead.\n",
      "│   caller = ip:0x0\n",
      "└ @ Core :-1\n"
     ]
    },
    {
     "data": {
      "application/vnd.webio.node+json": {
       "children": [
        {
         "children": [
          {
           "children": [
            {
             "children": [
              "Next Query"
             ],
             "instanceArgs": {
              "namespace": "html",
              "tag": "button"
             },
             "nodeType": "DOM",
             "props": {
              "attributes": {
               "data-bind": "click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}"
              },
              "className": "is-medium button is-primary",
              "style": {}
             },
             "type": "node"
            }
           ],
           "instanceArgs": {
            "handlers": {
             "clicks": [
              "(function (val){return (val!=this.model[\"clicks\"]()) ? (this.valueFromJulia[\"clicks\"]=true, this.model[\"clicks\"](val)) : undefined})"
             ],
             "loading": [
              "(function (val){return (val!=this.model[\"loading\"]()) ? (this.valueFromJulia[\"loading\"]=true, this.model[\"loading\"](val)) : undefined})"
             ]
            },
            "id": "10875351152603763960",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/5f254f8290f92c1139be3356c65c29b6c2465ab3-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/864328c1fe6b62425bf81dc8d7a005edc53ea939-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/bd804a1568ad8eaf3c69992570e5a64896b93ba2-bulma_confined.min.css"
              }
             ],
             "type": "async_block"
            },
            "mount_callbacks": [
             "function () {\n    var handler = (function (ko, koPunches) {\n    ko.punches.enableAll();\n    ko.bindingHandlers.numericValue = {\n        init : function(element, valueAccessor, allBindings, data, context) {\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\n            stringified.subscribe(function(value) {\n                var val = parseFloat(value);\n                if (!isNaN(val)) {\n                    valueAccessor()(val);\n                }\n            })\n            valueAccessor().subscribe(function(value) {\n                var str = JSON.stringify(value);\n                if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n                     return;\n                 if ([\"null\", \"\"].indexOf(str) >= 0)\n                     return;\n                stringified(str);\n            })\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"loading\":WebIO.getval({\"name\":\"loading\",\"scope\":\"10875351152603763960\",\"id\":\"ob_02\",\"type\":\"observable\"}),\"clicks\":WebIO.getval({\"name\":\"clicks\",\"scope\":\"10875351152603763960\",\"id\":\"ob_01\",\"type\":\"observable\"})};\n    var self = this;\n    function AppViewModel() {\n        for (var key in json_data) {\n            var el = json_data[key];\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n        }\n        \n        \n        [this[\"loading\"].subscribe((function (val){!(this.valueFromJulia[\"loading\"]) ? (WebIO.setval({\"name\":\"loading\",\"scope\":\"10875351152603763960\",\"id\":\"ob_02\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"loading\"]=false}),self),this[\"clicks\"].subscribe((function (val){!(this.valueFromJulia[\"clicks\"]) ? (WebIO.setval({\"name\":\"clicks\",\"scope\":\"10875351152603763960\",\"id\":\"ob_01\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"clicks\"]=false}),self)]\n        \n    }\n    self.model = new AppViewModel();\n    self.valueFromJulia = {};\n    for (var key in json_data) {\n        self.valueFromJulia[key] = false;\n    }\n    ko.applyBindings(self.model, self.dom);\n}\n);\n    (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "clicks": {
              "id": "ob_01",
              "sync": true,
              "value": 0
             },
             "loading": {
              "id": "ob_02",
              "sync": false,
              "value": false
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              "Update"
             ],
             "instanceArgs": {
              "namespace": "html",
              "tag": "button"
             },
             "nodeType": "DOM",
             "props": {
              "attributes": {
               "data-bind": "click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}"
              },
              "className": "is-medium button is-primary",
              "style": {}
             },
             "type": "node"
            }
           ],
           "instanceArgs": {
            "handlers": {
             "clicks": [
              "(function (val){return (val!=this.model[\"clicks\"]()) ? (this.valueFromJulia[\"clicks\"]=true, this.model[\"clicks\"](val)) : undefined})"
             ],
             "loading": [
              "(function (val){return (val!=this.model[\"loading\"]()) ? (this.valueFromJulia[\"loading\"]=true, this.model[\"loading\"](val)) : undefined})"
             ]
            },
            "id": "15311427662111168829",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/5f254f8290f92c1139be3356c65c29b6c2465ab3-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/864328c1fe6b62425bf81dc8d7a005edc53ea939-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/bd804a1568ad8eaf3c69992570e5a64896b93ba2-bulma_confined.min.css"
              }
             ],
             "type": "async_block"
            },
            "mount_callbacks": [
             "function () {\n    var handler = (function (ko, koPunches) {\n    ko.punches.enableAll();\n    ko.bindingHandlers.numericValue = {\n        init : function(element, valueAccessor, allBindings, data, context) {\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\n            stringified.subscribe(function(value) {\n                var val = parseFloat(value);\n                if (!isNaN(val)) {\n                    valueAccessor()(val);\n                }\n            })\n            valueAccessor().subscribe(function(value) {\n                var str = JSON.stringify(value);\n                if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n                     return;\n                 if ([\"null\", \"\"].indexOf(str) >= 0)\n                     return;\n                stringified(str);\n            })\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"loading\":WebIO.getval({\"name\":\"loading\",\"scope\":\"15311427662111168829\",\"id\":\"ob_04\",\"type\":\"observable\"}),\"clicks\":WebIO.getval({\"name\":\"clicks\",\"scope\":\"15311427662111168829\",\"id\":\"ob_03\",\"type\":\"observable\"})};\n    var self = this;\n    function AppViewModel() {\n        for (var key in json_data) {\n            var el = json_data[key];\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n        }\n        \n        \n        [this[\"loading\"].subscribe((function (val){!(this.valueFromJulia[\"loading\"]) ? (WebIO.setval({\"name\":\"loading\",\"scope\":\"15311427662111168829\",\"id\":\"ob_04\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"loading\"]=false}),self),this[\"clicks\"].subscribe((function (val){!(this.valueFromJulia[\"clicks\"]) ? (WebIO.setval({\"name\":\"clicks\",\"scope\":\"15311427662111168829\",\"id\":\"ob_03\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"clicks\"]=false}),self)]\n        \n    }\n    self.model = new AppViewModel();\n    self.valueFromJulia = {};\n    for (var key in json_data) {\n        self.valueFromJulia[key] = false;\n    }\n    ko.applyBindings(self.model, self.dom);\n}\n);\n    (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "clicks": {
              "id": "ob_03",
              "sync": true,
              "value": 0
             },
             "loading": {
              "id": "ob_04",
              "sync": false,
              "value": false
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              "Finish"
             ],
             "instanceArgs": {
              "namespace": "html",
              "tag": "button"
             },
             "nodeType": "DOM",
             "props": {
              "attributes": {
               "data-bind": "click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}"
              },
              "className": "is-medium button is-primary",
              "style": {}
             },
             "type": "node"
            }
           ],
           "instanceArgs": {
            "handlers": {
             "clicks": [
              "(function (val){return (val!=this.model[\"clicks\"]()) ? (this.valueFromJulia[\"clicks\"]=true, this.model[\"clicks\"](val)) : undefined})"
             ],
             "loading": [
              "(function (val){return (val!=this.model[\"loading\"]()) ? (this.valueFromJulia[\"loading\"]=true, this.model[\"loading\"](val)) : undefined})"
             ]
            },
            "id": "7202567800496949621",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/5f254f8290f92c1139be3356c65c29b6c2465ab3-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/864328c1fe6b62425bf81dc8d7a005edc53ea939-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/bd804a1568ad8eaf3c69992570e5a64896b93ba2-bulma_confined.min.css"
              }
             ],
             "type": "async_block"
            },
            "mount_callbacks": [
             "function () {\n    var handler = (function (ko, koPunches) {\n    ko.punches.enableAll();\n    ko.bindingHandlers.numericValue = {\n        init : function(element, valueAccessor, allBindings, data, context) {\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\n            stringified.subscribe(function(value) {\n                var val = parseFloat(value);\n                if (!isNaN(val)) {\n                    valueAccessor()(val);\n                }\n            })\n            valueAccessor().subscribe(function(value) {\n                var str = JSON.stringify(value);\n                if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n                     return;\n                 if ([\"null\", \"\"].indexOf(str) >= 0)\n                     return;\n                stringified(str);\n            })\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"loading\":WebIO.getval({\"name\":\"loading\",\"scope\":\"7202567800496949621\",\"id\":\"ob_06\",\"type\":\"observable\"}),\"clicks\":WebIO.getval({\"name\":\"clicks\",\"scope\":\"7202567800496949621\",\"id\":\"ob_05\",\"type\":\"observable\"})};\n    var self = this;\n    function AppViewModel() {\n        for (var key in json_data) {\n            var el = json_data[key];\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n        }\n        \n        \n        [this[\"loading\"].subscribe((function (val){!(this.valueFromJulia[\"loading\"]) ? (WebIO.setval({\"name\":\"loading\",\"scope\":\"7202567800496949621\",\"id\":\"ob_06\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"loading\"]=false}),self),this[\"clicks\"].subscribe((function (val){!(this.valueFromJulia[\"clicks\"]) ? (WebIO.setval({\"name\":\"clicks\",\"scope\":\"7202567800496949621\",\"id\":\"ob_05\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"clicks\"]=false}),self)]\n        \n    }\n    self.model = new AppViewModel();\n    self.valueFromJulia = {};\n    for (var key in json_data) {\n        self.valueFromJulia[key] = false;\n    }\n    ko.applyBindings(self.model, self.dom);\n}\n);\n    (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "clicks": {
              "id": "ob_05",
              "sync": true,
              "value": 0
             },
             "loading": {
              "id": "ob_06",
              "sync": false,
              "value": false
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "field interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [
            {
             "children": [
              {
               "children": [
                {
                 "children": [
                  "UserPreference"
                 ],
                 "instanceArgs": {
                  "namespace": "html",
                  "tag": "label"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "className": "interact ",
                  "style": {
                   "padding": "5px 10px 0px 10px"
                  }
                 },
                 "type": "node"
                }
               ],
               "instanceArgs": {
                "namespace": "html",
                "tag": "div"
               },
               "nodeType": "DOM",
               "props": {
                "className": "interact-flex-row-left"
               },
               "type": "node"
              },
              {
               "children": [
                {
                 "children": [
                  {
                   "children": [
                    {
                     "children": [],
                     "instanceArgs": {
                      "namespace": "html",
                      "tag": "label"
                     },
                     "nodeType": "DOM",
                     "props": {
                      "attributes": {
                       "data-bind": "text : key"
                      }
                     },
                     "type": "node"
                    }
                   ],
                   "instanceArgs": {
                    "namespace": "html",
                    "tag": "span"
                   },
                   "nodeType": "DOM",
                   "props": {
                    "attributes": {
                     "data-bind": "click: function (){$root.update(val)}, css: {'is-primary is-selected' : $root.index() == val, 'interact-widget is-medium button ' : true}"
                    }
                   },
                   "type": "node"
                  }
                 ],
                 "instanceArgs": {
                  "namespace": "html",
                  "tag": "div"
                 },
                 "nodeType": "DOM",
                 "props": {
                  "attributes": {
                   "data-bind": "foreach : options_js"
                  },
                  "className": "buttons has-addons is-centered"
                 },
                 "type": "node"
                }
               ],
               "instanceArgs": {
                "namespace": "html",
                "tag": "div"
               },
               "nodeType": "DOM",
               "props": {
                "className": "interact-flex-row-center"
               },
               "type": "node"
              },
              {
               "children": [
                {
                 "children": [],
                 "instanceArgs": {
                  "namespace": "html",
                  "tag": "div"
                 },
                 "nodeType": "DOM",
                 "props": {},
                 "type": "node"
                }
               ],
               "instanceArgs": {
                "namespace": "html",
                "tag": "div"
               },
               "nodeType": "DOM",
               "props": {
                "className": "interact-flex-row-right"
               },
               "type": "node"
              }
             ],
             "instanceArgs": {
              "namespace": "html",
              "tag": "div"
             },
             "nodeType": "DOM",
             "props": {
              "className": "interact-flex-row interact-widget"
             },
             "type": "node"
            }
           ],
           "instanceArgs": {
            "handlers": {
             "index": [
              "(function (val){return (val!=this.model[\"index\"]()) ? (this.valueFromJulia[\"index\"]=true, this.model[\"index\"](val)) : undefined})"
             ],
             "options_js": [
              "(function (val){return (val!=this.model[\"options_js\"]()) ? (this.valueFromJulia[\"options_js\"]=true, this.model[\"options_js\"](val)) : undefined})"
             ]
            },
            "id": "13362849647835157599",
            "imports": {
             "data": [
              {
               "name": "knockout",
               "type": "js",
               "url": "/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js"
              },
              {
               "name": "knockout_punches",
               "type": "js",
               "url": "/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js"
              },
              {
               "name": null,
               "type": "js",
               "url": "/assetserver/5f254f8290f92c1139be3356c65c29b6c2465ab3-all.js"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/864328c1fe6b62425bf81dc8d7a005edc53ea939-style.css"
              },
              {
               "name": null,
               "type": "css",
               "url": "/assetserver/bd804a1568ad8eaf3c69992570e5a64896b93ba2-bulma_confined.min.css"
              }
             ],
             "type": "async_block"
            },
            "mount_callbacks": [
             "function () {\n    var handler = (function (ko, koPunches) {\n    ko.punches.enableAll();\n    ko.bindingHandlers.numericValue = {\n        init : function(element, valueAccessor, allBindings, data, context) {\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\n            stringified.subscribe(function(value) {\n                var val = parseFloat(value);\n                if (!isNaN(val)) {\n                    valueAccessor()(val);\n                }\n            })\n            valueAccessor().subscribe(function(value) {\n                var str = JSON.stringify(value);\n                if ((str == \"0\") && ([\"-0\", \"-0.\"].indexOf(stringified()) >= 0))\n                     return;\n                 if ([\"null\", \"\"].indexOf(str) >= 0)\n                     return;\n                stringified(str);\n            })\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\n        }\n    };\n    var json_data = {\"options_js\":WebIO.getval({\"name\":\"options_js\",\"scope\":\"13362849647835157599\",\"id\":\"ob_11\",\"type\":\"observable\"}),\"index\":WebIO.getval({\"name\":\"index\",\"scope\":\"13362849647835157599\",\"id\":\"ob_10\",\"type\":\"observable\"})};\n    var self = this;\n    function AppViewModel() {\n        for (var key in json_data) {\n            var el = json_data[key];\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\n        }\n        [this[\"update\"]=function (val) {this.index(val)}]\n        \n        [this[\"options_js\"].subscribe((function (val){!(this.valueFromJulia[\"options_js\"]) ? (WebIO.setval({\"name\":\"options_js\",\"scope\":\"13362849647835157599\",\"id\":\"ob_11\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"options_js\"]=false}),self),this[\"index\"].subscribe((function (val){!(this.valueFromJulia[\"index\"]) ? (WebIO.setval({\"name\":\"index\",\"scope\":\"13362849647835157599\",\"id\":\"ob_10\",\"type\":\"observable\"},val)) : undefined; return this.valueFromJulia[\"index\"]=false}),self)]\n        \n    }\n    self.model = new AppViewModel();\n    self.valueFromJulia = {};\n    for (var key in json_data) {\n        self.valueFromJulia[key] = false;\n    }\n    ko.applyBindings(self.model, self.dom);\n}\n);\n    (WebIO.importBlock({\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\"}],\"type\":\"async_block\"})).then((imports) => handler.apply(this, imports));\n}\n"
            ],
            "observables": {
             "index": {
              "id": "ob_10",
              "sync": true,
              "value": 1
             },
             "options_js": {
              "id": "ob_11",
              "sync": false,
              "value": [
               {
                "id": "idNpScQTGJ",
                "key": "Model 1",
                "val": 1
               },
               {
                "id": "idN0xloynU",
                "key": "Model 2",
                "val": 2
               }
              ]
             }
            },
            "systemjs_options": null
           },
           "nodeType": "Scope",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "namespace": "html",
          "tag": "div"
         },
         "nodeType": "DOM",
         "props": {
          "className": "interact-widget"
         },
         "type": "node"
        },
        {
         "children": [
          {
           "children": [],
           "instanceArgs": {
            "id": "ob_17",
            "name": "obs-node"
           },
           "nodeType": "ObservableNode",
           "props": {},
           "type": "node"
          }
         ],
         "instanceArgs": {
          "handlers": {},
          "id": "5147545595078948384",
          "imports": {
           "data": [],
           "type": "async_block"
          },
          "mount_callbacks": [],
          "observables": {
           "obs-node": {
            "id": "ob_17",
            "sync": false,
            "value": {
             "children": [
              ""
             ],
             "instanceArgs": {
              "namespace": "html",
              "tag": "div"
             },
             "nodeType": "DOM",
             "props": {
              "className": "interact-flex-row interact-widget"
             },
             "type": "node"
            }
           }
          },
          "systemjs_options": null
         },
         "nodeType": "Scope",
         "props": {},
         "type": "node"
        }
       ],
       "instanceArgs": {
        "namespace": "html",
        "tag": "div"
       },
       "nodeType": "DOM",
       "props": {},
       "type": "node"
      },
      "text/html": [
       "<div\n",
       "    class=\"webio-mountpoint\"\n",
       "    data-webio-mountpoint=\"5364132004946046812\"\n",
       ">\n",
       "    <script>\n",
       "    if (window.require && require.defined && require.defined(\"nbextensions/webio/main\")) {\n",
       "        console.log(\"Jupyter WebIO extension detected, not mounting.\");\n",
       "    } else if (window.WebIO) {\n",
       "        WebIO.mount(\n",
       "            document.querySelector('[data-webio-mountpoint=\"5364132004946046812\"]'),\n",
       "            {\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"field interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/5f254f8290f92c1139be3356c65c29b6c2465ab3-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/864328c1fe6b62425bf81dc8d7a005edc53ea939-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/bd804a1568ad8eaf3c69992570e5a64896b93ba2-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"10875351152603763960\",\"handlers\":{\"loading\":[\"(function (val){return (val!=this.model[\\\"loading\\\"]()) ? (this.valueFromJulia[\\\"loading\\\"]=true, this.model[\\\"loading\\\"](val)) : undefined})\"],\"clicks\":[\"(function (val){return (val!=this.model[\\\"clicks\\\"]()) ? (this.valueFromJulia[\\\"clicks\\\"]=true, this.model[\\\"clicks\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n    var handler = (function (ko, koPunches) {\\n    ko.punches.enableAll();\\n    ko.bindingHandlers.numericValue = {\\n        init : function(element, valueAccessor, allBindings, data, context) {\\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n            stringified.subscribe(function(value) {\\n                var val = parseFloat(value);\\n                if (!isNaN(val)) {\\n                    valueAccessor()(val);\\n                }\\n            })\\n            valueAccessor().subscribe(function(value) {\\n                var str = JSON.stringify(value);\\n                if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n                     return;\\n                 if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n                     return;\\n                stringified(str);\\n            })\\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"loading\\\":WebIO.getval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"10875351152603763960\\\",\\\"id\\\":\\\"ob_02\\\",\\\"type\\\":\\\"observable\\\"}),\\\"clicks\\\":WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"10875351152603763960\\\",\\\"id\\\":\\\"ob_01\\\",\\\"type\\\":\\\"observable\\\"})};\\n    var self = this;\\n    function AppViewModel() {\\n        for (var key in json_data) {\\n            var el = json_data[key];\\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n        }\\n        \\n        \\n        [this[\\\"loading\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"loading\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"10875351152603763960\\\",\\\"id\\\":\\\"ob_02\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"loading\\\"]=false}),self),this[\\\"clicks\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"clicks\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"10875351152603763960\\\",\\\"id\\\":\\\"ob_01\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"clicks\\\"]=false}),self)]\\n        \\n    }\\n    self.model = new AppViewModel();\\n    self.valueFromJulia = {};\\n    for (var key in json_data) {\\n        self.valueFromJulia[key] = false;\\n    }\\n    ko.applyBindings(self.model, self.dom);\\n}\\n);\\n    (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"loading\":{\"sync\":false,\"id\":\"ob_02\",\"value\":false},\"clicks\":{\"sync\":true,\"id\":\"ob_01\",\"value\":0}}},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}\"},\"className\":\"is-medium button is-primary\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"button\"},\"children\":[\"Next Query\"]}]}]},{\"props\":{\"className\":\"field interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/5f254f8290f92c1139be3356c65c29b6c2465ab3-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/864328c1fe6b62425bf81dc8d7a005edc53ea939-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/bd804a1568ad8eaf3c69992570e5a64896b93ba2-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"15311427662111168829\",\"handlers\":{\"loading\":[\"(function (val){return (val!=this.model[\\\"loading\\\"]()) ? (this.valueFromJulia[\\\"loading\\\"]=true, this.model[\\\"loading\\\"](val)) : undefined})\"],\"clicks\":[\"(function (val){return (val!=this.model[\\\"clicks\\\"]()) ? (this.valueFromJulia[\\\"clicks\\\"]=true, this.model[\\\"clicks\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n    var handler = (function (ko, koPunches) {\\n    ko.punches.enableAll();\\n    ko.bindingHandlers.numericValue = {\\n        init : function(element, valueAccessor, allBindings, data, context) {\\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n            stringified.subscribe(function(value) {\\n                var val = parseFloat(value);\\n                if (!isNaN(val)) {\\n                    valueAccessor()(val);\\n                }\\n            })\\n            valueAccessor().subscribe(function(value) {\\n                var str = JSON.stringify(value);\\n                if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n                     return;\\n                 if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n                     return;\\n                stringified(str);\\n            })\\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"loading\\\":WebIO.getval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"15311427662111168829\\\",\\\"id\\\":\\\"ob_04\\\",\\\"type\\\":\\\"observable\\\"}),\\\"clicks\\\":WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"15311427662111168829\\\",\\\"id\\\":\\\"ob_03\\\",\\\"type\\\":\\\"observable\\\"})};\\n    var self = this;\\n    function AppViewModel() {\\n        for (var key in json_data) {\\n            var el = json_data[key];\\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n        }\\n        \\n        \\n        [this[\\\"loading\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"loading\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"15311427662111168829\\\",\\\"id\\\":\\\"ob_04\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"loading\\\"]=false}),self),this[\\\"clicks\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"clicks\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"15311427662111168829\\\",\\\"id\\\":\\\"ob_03\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"clicks\\\"]=false}),self)]\\n        \\n    }\\n    self.model = new AppViewModel();\\n    self.valueFromJulia = {};\\n    for (var key in json_data) {\\n        self.valueFromJulia[key] = false;\\n    }\\n    ko.applyBindings(self.model, self.dom);\\n}\\n);\\n    (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"loading\":{\"sync\":false,\"id\":\"ob_04\",\"value\":false},\"clicks\":{\"sync\":true,\"id\":\"ob_03\",\"value\":0}}},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}\"},\"className\":\"is-medium button is-primary\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"button\"},\"children\":[\"Update\"]}]}]},{\"props\":{\"className\":\"field interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/5f254f8290f92c1139be3356c65c29b6c2465ab3-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/864328c1fe6b62425bf81dc8d7a005edc53ea939-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/bd804a1568ad8eaf3c69992570e5a64896b93ba2-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"7202567800496949621\",\"handlers\":{\"loading\":[\"(function (val){return (val!=this.model[\\\"loading\\\"]()) ? (this.valueFromJulia[\\\"loading\\\"]=true, this.model[\\\"loading\\\"](val)) : undefined})\"],\"clicks\":[\"(function (val){return (val!=this.model[\\\"clicks\\\"]()) ? (this.valueFromJulia[\\\"clicks\\\"]=true, this.model[\\\"clicks\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n    var handler = (function (ko, koPunches) {\\n    ko.punches.enableAll();\\n    ko.bindingHandlers.numericValue = {\\n        init : function(element, valueAccessor, allBindings, data, context) {\\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n            stringified.subscribe(function(value) {\\n                var val = parseFloat(value);\\n                if (!isNaN(val)) {\\n                    valueAccessor()(val);\\n                }\\n            })\\n            valueAccessor().subscribe(function(value) {\\n                var str = JSON.stringify(value);\\n                if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n                     return;\\n                 if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n                     return;\\n                stringified(str);\\n            })\\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"loading\\\":WebIO.getval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"7202567800496949621\\\",\\\"id\\\":\\\"ob_06\\\",\\\"type\\\":\\\"observable\\\"}),\\\"clicks\\\":WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7202567800496949621\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"})};\\n    var self = this;\\n    function AppViewModel() {\\n        for (var key in json_data) {\\n            var el = json_data[key];\\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n        }\\n        \\n        \\n        [this[\\\"loading\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"loading\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"7202567800496949621\\\",\\\"id\\\":\\\"ob_06\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"loading\\\"]=false}),self),this[\\\"clicks\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"clicks\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7202567800496949621\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"clicks\\\"]=false}),self)]\\n        \\n    }\\n    self.model = new AppViewModel();\\n    self.valueFromJulia = {};\\n    for (var key in json_data) {\\n        self.valueFromJulia[key] = false;\\n    }\\n    ko.applyBindings(self.model, self.dom);\\n}\\n);\\n    (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"loading\":{\"sync\":false,\"id\":\"ob_06\",\"value\":false},\"clicks\":{\"sync\":true,\"id\":\"ob_05\",\"value\":0}}},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}\"},\"className\":\"is-medium button is-primary\",\"style\":{}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"button\"},\"children\":[\"Finish\"]}]}]},{\"props\":{\"className\":\"interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[{\"name\":\"knockout\",\"type\":\"js\",\"url\":\"\\/assetserver\\/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\"},{\"name\":\"knockout_punches\",\"type\":\"js\",\"url\":\"\\/assetserver\\/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\"},{\"name\":null,\"type\":\"js\",\"url\":\"\\/assetserver\\/5f254f8290f92c1139be3356c65c29b6c2465ab3-all.js\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/864328c1fe6b62425bf81dc8d7a005edc53ea939-style.css\"},{\"name\":null,\"type\":\"css\",\"url\":\"\\/assetserver\\/bd804a1568ad8eaf3c69992570e5a64896b93ba2-bulma_confined.min.css\"}],\"type\":\"async_block\"},\"id\":\"13362849647835157599\",\"handlers\":{\"options_js\":[\"(function (val){return (val!=this.model[\\\"options_js\\\"]()) ? (this.valueFromJulia[\\\"options_js\\\"]=true, this.model[\\\"options_js\\\"](val)) : undefined})\"],\"index\":[\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\"]},\"systemjs_options\":null,\"mount_callbacks\":[\"function () {\\n    var handler = (function (ko, koPunches) {\\n    ko.punches.enableAll();\\n    ko.bindingHandlers.numericValue = {\\n        init : function(element, valueAccessor, allBindings, data, context) {\\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n            stringified.subscribe(function(value) {\\n                var val = parseFloat(value);\\n                if (!isNaN(val)) {\\n                    valueAccessor()(val);\\n                }\\n            })\\n            valueAccessor().subscribe(function(value) {\\n                var str = JSON.stringify(value);\\n                if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n                     return;\\n                 if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n                     return;\\n                stringified(str);\\n            })\\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"options_js\\\":WebIO.getval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"13362849647835157599\\\",\\\"id\\\":\\\"ob_11\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"13362849647835157599\\\",\\\"id\\\":\\\"ob_10\\\",\\\"type\\\":\\\"observable\\\"})};\\n    var self = this;\\n    function AppViewModel() {\\n        for (var key in json_data) {\\n            var el = json_data[key];\\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n        }\\n        [this[\\\"update\\\"]=function (val) {this.index(val)}]\\n        \\n        [this[\\\"options_js\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"options_js\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"13362849647835157599\\\",\\\"id\\\":\\\"ob_11\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"options_js\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"13362849647835157599\\\",\\\"id\\\":\\\"ob_10\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n        \\n    }\\n    self.model = new AppViewModel();\\n    self.valueFromJulia = {};\\n    for (var key in json_data) {\\n        self.valueFromJulia[key] = false;\\n    }\\n    ko.applyBindings(self.model, self.dom);\\n}\\n);\\n    (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"\\/assetserver\\/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\"],\"observables\":{\"options_js\":{\"sync\":false,\"id\":\"ob_11\",\"value\":[{\"key\":\"Model 1\",\"val\":1,\"id\":\"idNpScQTGJ\"},{\"key\":\"Model 2\",\"val\":2,\"id\":\"idN0xloynU\"}]},\"index\":{\"sync\":true,\"id\":\"ob_10\",\"value\":1}}},\"children\":[{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact-flex-row-left\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"className\":\"interact \",\"style\":{\"padding\":\"5px 10px 0px 10px\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[\"UserPreference\"]}]},{\"props\":{\"className\":\"interact-flex-row-center\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"foreach : options_js\"},\"className\":\"buttons has-addons is-centered\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"click: function (){$root.update(val)}, css: {'is-primary is-selected' : $root.index() == val, 'interact-widget is-medium button ' : true}\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"span\"},\"children\":[{\"props\":{\"attributes\":{\"data-bind\":\"text : key\"}},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"label\"},\"children\":[]}]}]}]},{\"props\":{\"className\":\"interact-flex-row-right\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[{\"props\":{},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[]}]}]}]}]},{\"props\":{},\"nodeType\":\"Scope\",\"type\":\"node\",\"instanceArgs\":{\"imports\":{\"data\":[],\"type\":\"async_block\"},\"id\":\"7195200975584255244\",\"handlers\":{},\"systemjs_options\":null,\"mount_callbacks\":[],\"observables\":{\"obs-node\":{\"sync\":false,\"id\":\"ob_15\",\"value\":{\"props\":{\"className\":\"interact-flex-row interact-widget\"},\"nodeType\":\"DOM\",\"type\":\"node\",\"instanceArgs\":{\"namespace\":\"html\",\"tag\":\"div\"},\"children\":[\"\"]}}}},\"children\":[{\"props\":{},\"nodeType\":\"ObservableNode\",\"type\":\"node\",\"instanceArgs\":{\"id\":\"ob_15\",\"name\":\"obs-node\"},\"children\":[]}]}]},\n",
       "            window,\n",
       "        );\n",
       "    } else {\n",
       "        document\n",
       "            .querySelector('[data-webio-mountpoint=\"5364132004946046812\"]')\n",
       "            .innerHTML = '<strong>WebIO not detected.</strong>';\n",
       "    }\n",
       "    </script>\n",
       "</div>\n"
      ],
      "text/plain": [
       "Node{WebIO.DOM}(WebIO.DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Scope(Node{DOM}(DOM(:html, :button), Any[\"Next Query\"], Dict{Symbol,Any}(:attributes=>Dict{Any,Any}(\"data-bind\"=>\"click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}\"),:className=>\"is-medium button is-primary\",:style=>Dict{String,Any}())), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"loading\"=>(Observable{Bool} with 1 listeners. Value:\n",
       "false, nothing),\"clicks\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "0, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/Users/sydneykatz/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/Users/sydneykatz/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/Users/sydneykatz/.julia/packages/InteractBase/l8cEC/src/../assets/all.js\"), Asset(\"css\", nothing, \"/Users/sydneykatz/.julia/packages/InteractBase/l8cEC/src/../assets/style.css\"), Asset(\"css\", nothing, \"/Users/sydneykatz/.julia/packages/Interact/0klKX/src/../assets/bulma_confined.min.css\")], Dict{Any,Any}(\"loading\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"loading\\\"]()) ? (this.valueFromJulia[\\\"loading\\\"]=true, this.model[\\\"loading\\\"](val)) : undefined})\")],\"clicks\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"clicks\\\"]()) ? (this.valueFromJulia[\\\"clicks\\\"]=true, this.model[\\\"clicks\\\"](val)) : undefined})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.JSString[JSString(\"function () {\\n    var handler = (function (ko, koPunches) {\\n    ko.punches.enableAll();\\n    ko.bindingHandlers.numericValue = {\\n        init : function(element, valueAccessor, allBindings, data, context) {\\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n            stringified.subscribe(function(value) {\\n                var val = parseFloat(value);\\n                if (!isNaN(val)) {\\n                    valueAccessor()(val);\\n                }\\n            })\\n            valueAccessor().subscribe(function(value) {\\n                var str = JSON.stringify(value);\\n                if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n                     return;\\n                 if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n                     return;\\n                stringified(str);\\n            })\\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"loading\\\":WebIO.getval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"10875351152603763960\\\",\\\"id\\\":\\\"ob_02\\\",\\\"type\\\":\\\"observable\\\"}),\\\"clicks\\\":WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"10875351152603763960\\\",\\\"id\\\":\\\"ob_01\\\",\\\"type\\\":\\\"observable\\\"})};\\n    var self = this;\\n    function AppViewModel() {\\n        for (var key in json_data) {\\n            var el = json_data[key];\\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n        }\\n        \\n        \\n        [this[\\\"loading\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"loading\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"10875351152603763960\\\",\\\"id\\\":\\\"ob_02\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"loading\\\"]=false}),self),this[\\\"clicks\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"clicks\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"10875351152603763960\\\",\\\"id\\\":\\\"ob_01\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"clicks\\\"]=false}),self)]\\n        \\n    }\\n    self.model = new AppViewModel();\\n    self.valueFromJulia = {};\\n    for (var key in json_data) {\\n        self.valueFromJulia[key] = false;\\n    }\\n    ko.applyBindings(self.model, self.dom);\\n}\\n);\\n    (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\")), Node{DOM}(DOM(:html, :div), Any[Scope(Node{DOM}(DOM(:html, :button), Any[\"Update\"], Dict{Symbol,Any}(:attributes=>Dict{Any,Any}(\"data-bind\"=>\"click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}\"),:className=>\"is-medium button is-primary\",:style=>Dict{String,Any}())), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"loading\"=>(Observable{Bool} with 1 listeners. Value:\n",
       "false, nothing),\"clicks\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "0, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/Users/sydneykatz/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/Users/sydneykatz/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/Users/sydneykatz/.julia/packages/InteractBase/l8cEC/src/../assets/all.js\"), Asset(\"css\", nothing, \"/Users/sydneykatz/.julia/packages/InteractBase/l8cEC/src/../assets/style.css\"), Asset(\"css\", nothing, \"/Users/sydneykatz/.julia/packages/Interact/0klKX/src/../assets/bulma_confined.min.css\")], Dict{Any,Any}(\"loading\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"loading\\\"]()) ? (this.valueFromJulia[\\\"loading\\\"]=true, this.model[\\\"loading\\\"](val)) : undefined})\")],\"clicks\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"clicks\\\"]()) ? (this.valueFromJulia[\\\"clicks\\\"]=true, this.model[\\\"clicks\\\"](val)) : undefined})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.JSString[JSString(\"function () {\\n    var handler = (function (ko, koPunches) {\\n    ko.punches.enableAll();\\n    ko.bindingHandlers.numericValue = {\\n        init : function(element, valueAccessor, allBindings, data, context) {\\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n            stringified.subscribe(function(value) {\\n                var val = parseFloat(value);\\n                if (!isNaN(val)) {\\n                    valueAccessor()(val);\\n                }\\n            })\\n            valueAccessor().subscribe(function(value) {\\n                var str = JSON.stringify(value);\\n                if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n                     return;\\n                 if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n                     return;\\n                stringified(str);\\n            })\\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"loading\\\":WebIO.getval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"15311427662111168829\\\",\\\"id\\\":\\\"ob_04\\\",\\\"type\\\":\\\"observable\\\"}),\\\"clicks\\\":WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"15311427662111168829\\\",\\\"id\\\":\\\"ob_03\\\",\\\"type\\\":\\\"observable\\\"})};\\n    var self = this;\\n    function AppViewModel() {\\n        for (var key in json_data) {\\n            var el = json_data[key];\\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n        }\\n        \\n        \\n        [this[\\\"loading\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"loading\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"15311427662111168829\\\",\\\"id\\\":\\\"ob_04\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"loading\\\"]=false}),self),this[\\\"clicks\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"clicks\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"15311427662111168829\\\",\\\"id\\\":\\\"ob_03\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"clicks\\\"]=false}),self)]\\n        \\n    }\\n    self.model = new AppViewModel();\\n    self.valueFromJulia = {};\\n    for (var key in json_data) {\\n        self.valueFromJulia[key] = false;\\n    }\\n    ko.applyBindings(self.model, self.dom);\\n}\\n);\\n    (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\")), Node{DOM}(DOM(:html, :div), Any[Scope(Node{DOM}(DOM(:html, :button), Any[\"Finish\"], Dict{Symbol,Any}(:attributes=>Dict{Any,Any}(\"data-bind\"=>\"click: function (){this.clicks(this.clicks()+1)}, css: {'is-loading' : loading}\"),:className=>\"is-medium button is-primary\",:style=>Dict{String,Any}())), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"loading\"=>(Observable{Bool} with 1 listeners. Value:\n",
       "false, nothing),\"clicks\"=>(Observable{Int64} with 2 listeners. Value:\n",
       "0, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/Users/sydneykatz/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/Users/sydneykatz/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/Users/sydneykatz/.julia/packages/InteractBase/l8cEC/src/../assets/all.js\"), Asset(\"css\", nothing, \"/Users/sydneykatz/.julia/packages/InteractBase/l8cEC/src/../assets/style.css\"), Asset(\"css\", nothing, \"/Users/sydneykatz/.julia/packages/Interact/0klKX/src/../assets/bulma_confined.min.css\")], Dict{Any,Any}(\"loading\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"loading\\\"]()) ? (this.valueFromJulia[\\\"loading\\\"]=true, this.model[\\\"loading\\\"](val)) : undefined})\")],\"clicks\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"clicks\\\"]()) ? (this.valueFromJulia[\\\"clicks\\\"]=true, this.model[\\\"clicks\\\"](val)) : undefined})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.JSString[JSString(\"function () {\\n    var handler = (function (ko, koPunches) {\\n    ko.punches.enableAll();\\n    ko.bindingHandlers.numericValue = {\\n        init : function(element, valueAccessor, allBindings, data, context) {\\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n            stringified.subscribe(function(value) {\\n                var val = parseFloat(value);\\n                if (!isNaN(val)) {\\n                    valueAccessor()(val);\\n                }\\n            })\\n            valueAccessor().subscribe(function(value) {\\n                var str = JSON.stringify(value);\\n                if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n                     return;\\n                 if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n                     return;\\n                stringified(str);\\n            })\\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"loading\\\":WebIO.getval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"7202567800496949621\\\",\\\"id\\\":\\\"ob_06\\\",\\\"type\\\":\\\"observable\\\"}),\\\"clicks\\\":WebIO.getval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7202567800496949621\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"})};\\n    var self = this;\\n    function AppViewModel() {\\n        for (var key in json_data) {\\n            var el = json_data[key];\\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n        }\\n        \\n        \\n        [this[\\\"loading\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"loading\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"loading\\\",\\\"scope\\\":\\\"7202567800496949621\\\",\\\"id\\\":\\\"ob_06\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"loading\\\"]=false}),self),this[\\\"clicks\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"clicks\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"clicks\\\",\\\"scope\\\":\\\"7202567800496949621\\\",\\\"id\\\":\\\"ob_05\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"clicks\\\"]=false}),self)]\\n        \\n    }\\n    self.model = new AppViewModel();\\n    self.valueFromJulia = {};\\n    for (var key in json_data) {\\n        self.valueFromJulia[key] = false;\\n    }\\n    ko.applyBindings(self.model, self.dom);\\n}\\n);\\n    (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"field interact-widget\")), Node{DOM}(DOM(:html, :div), Any[Scope(Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :label), Any[\"UserPreference\"], Dict{Symbol,Any}(:className=>\"interact \",:style=>Dict{Any,Any}(:padding=>\"5px 10px 0px 10px\")))], Dict{Symbol,Any}(:className=>\"interact-flex-row-left\")), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :span), Any[Node{DOM}(DOM(:html, :label), Any[], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"text : key\")))], Dict{Symbol,Any}(:attributes=>Dict(\"data-bind\"=>\"click: function (){\\$root.update(val)}, css: {'is-primary is-selected' : \\$root.index() == val, 'interact-widget is-medium button ' : true}\")))], Dict{Symbol,Any}(:attributes=>(\"data-bind\"=>\"foreach : options_js\"),:className=>\"buttons has-addons is-centered\"))], Dict{Symbol,Any}(:className=>\"interact-flex-row-center\")), Node{DOM}(DOM(:html, :div), Any[Node{DOM}(DOM(:html, :div), Any[], Dict{Symbol,Any}())], Dict{Symbol,Any}(:className=>\"interact-flex-row-right\"))], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\")), Dict{String,Tuple{Observables.AbstractObservable,Union{Nothing, Bool}}}(\"options_js\"=>(Observable{Any} with 1 listeners. Value:\n",
       "OrderedDict[OrderedDict{String,Any}(\"key\"=>\"Model 1\",\"val\"=>1,\"id\"=>\"idNpScQTGJ\"), OrderedDict{String,Any}(\"key\"=>\"Model 2\",\"val\"=>2,\"id\"=>\"idN0xloynU\")], nothing),\"index\"=>(Observable{Any} with 2 listeners. Value:\n",
       "1, nothing)), Set(String[]), nothing, Asset[Asset(\"js\", \"knockout\", \"/Users/sydneykatz/.julia/packages/Knockout/JE2Yq/src/../assets/knockout.js\"), Asset(\"js\", \"knockout_punches\", \"/Users/sydneykatz/.julia/packages/Knockout/JE2Yq/src/../assets/knockout_punches.js\"), Asset(\"js\", nothing, \"/Users/sydneykatz/.julia/packages/InteractBase/l8cEC/src/../assets/all.js\"), Asset(\"css\", nothing, \"/Users/sydneykatz/.julia/packages/InteractBase/l8cEC/src/../assets/style.css\"), Asset(\"css\", nothing, \"/Users/sydneykatz/.julia/packages/Interact/0klKX/src/../assets/bulma_confined.min.css\")], Dict{Any,Any}(\"options_js\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"options_js\\\"]()) ? (this.valueFromJulia[\\\"options_js\\\"]=true, this.model[\\\"options_js\\\"](val)) : undefined})\")],\"index\"=>Any[JSString(\"(function (val){return (val!=this.model[\\\"index\\\"]()) ? (this.valueFromJulia[\\\"index\\\"]=true, this.model[\\\"index\\\"](val)) : undefined})\")]), ConnectionPool(Channel{Any}(sz_max:9223372036854775807,sz_curr:0), Set(AbstractConnection[]), Channel{AbstractConnection}(sz_max:32,sz_curr:0)), WebIO.JSString[JSString(\"function () {\\n    var handler = (function (ko, koPunches) {\\n    ko.punches.enableAll();\\n    ko.bindingHandlers.numericValue = {\\n        init : function(element, valueAccessor, allBindings, data, context) {\\n            var stringified = ko.observable(ko.unwrap(valueAccessor()));\\n            stringified.subscribe(function(value) {\\n                var val = parseFloat(value);\\n                if (!isNaN(val)) {\\n                    valueAccessor()(val);\\n                }\\n            })\\n            valueAccessor().subscribe(function(value) {\\n                var str = JSON.stringify(value);\\n                if ((str == \\\"0\\\") && ([\\\"-0\\\", \\\"-0.\\\"].indexOf(stringified()) >= 0))\\n                     return;\\n                 if ([\\\"null\\\", \\\"\\\"].indexOf(str) >= 0)\\n                     return;\\n                stringified(str);\\n            })\\n            ko.applyBindingsToNode(element, { value: stringified, valueUpdate: allBindings.get('valueUpdate')}, context);\\n        }\\n    };\\n    var json_data = {\\\"options_js\\\":WebIO.getval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"13362849647835157599\\\",\\\"id\\\":\\\"ob_11\\\",\\\"type\\\":\\\"observable\\\"}),\\\"index\\\":WebIO.getval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"13362849647835157599\\\",\\\"id\\\":\\\"ob_10\\\",\\\"type\\\":\\\"observable\\\"})};\\n    var self = this;\\n    function AppViewModel() {\\n        for (var key in json_data) {\\n            var el = json_data[key];\\n            this[key] = Array.isArray(el) ? ko.observableArray(el) : ko.observable(el);\\n        }\\n        [this[\\\"update\\\"]=function (val) {this.index(val)}]\\n        \\n        [this[\\\"options_js\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"options_js\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"options_js\\\",\\\"scope\\\":\\\"13362849647835157599\\\",\\\"id\\\":\\\"ob_11\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"options_js\\\"]=false}),self),this[\\\"index\\\"].subscribe((function (val){!(this.valueFromJulia[\\\"index\\\"]) ? (WebIO.setval({\\\"name\\\":\\\"index\\\",\\\"scope\\\":\\\"13362849647835157599\\\",\\\"id\\\":\\\"ob_10\\\",\\\"type\\\":\\\"observable\\\"},val)) : undefined; return this.valueFromJulia[\\\"index\\\"]=false}),self)]\\n        \\n    }\\n    self.model = new AppViewModel();\\n    self.valueFromJulia = {};\\n    for (var key in json_data) {\\n        self.valueFromJulia[key] = false;\\n    }\\n    ko.applyBindings(self.model, self.dom);\\n}\\n);\\n    (WebIO.importBlock({\\\"data\\\":[{\\\"name\\\":\\\"knockout\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/8d7ab0574f4fad855e431620c7575e8c4adac448-knockout.js\\\"},{\\\"name\\\":\\\"knockout_punches\\\",\\\"type\\\":\\\"js\\\",\\\"url\\\":\\\"/assetserver/3faa8aec2af3b4b46d44d40f8d0c197e63417973-knockout_punches.js\\\"}],\\\"type\\\":\\\"async_block\\\"})).then((imports) => handler.apply(this, imports));\\n}\\n\")])], Dict{Symbol,Any}(:className=>\"interact-widget\")), Observable{Any} with 0 listeners. Value:\n",
       "Node{DOM}(DOM(:html, :div), Any[nothing], Dict{Symbol,Any}(:className=>\"interact-flex-row interact-widget\"))], Dict{Symbol,Any}())"
      ]
     },
     "execution_count": 2,
     "metadata": {
      "application/vnd.webio.node+json": {
       "kernelId": "3aacf462-9878-4b8d-97d6-7b6c8d090b30"
      }
     },
     "output_type": "execute_result"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Creating Next Query...\n",
      "WeightSet([0.642306, 0.254513, 0.103182], [0.340311, 0.61541, 0.0442792])\n",
      "Creating Next Query...\n",
      "WeightSet([0.206779, 0.385528, 0.407693], [0.199882, 0.559069, 0.24105])\n",
      "Creating Next Query...\n",
      "WeightSet([0.206743, 0.780103, 0.0131537], [0.745459, 0.131109, 0.123432])\n",
      "Creating Next Query...\n",
      "WeightSet([0.0995346, 0.874738, 0.0257273], [0.0529056, 0.108414, 0.83868])\n",
      "Creating Next Query...\n",
      "WeightSet([0.0210406, 0.777084, 0.201876], [0.242198, 0.726147, 0.0316546])\n"
     ]
    }
   ],
   "source": [
    "interactive_reward_iteration()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "@webio": {
   "lastCommId": "3dbbc077380344c98d692529b997a245",
   "lastKernelId": "3aacf462-9878-4b8d-97d6-7b6c8d090b30"
  },
  "kernelspec": {
   "display_name": "Julia 1.0.0",
   "language": "julia",
   "name": "julia-1.0"
  },
  "language_info": {
   "file_extension": ".jl",
   "mimetype": "application/julia",
   "name": "julia",
   "version": "1.0.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}