{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from emperor.core import Emperor\n",
    "from skbio import OrdinationResults\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "N = 100\n",
    "M = 100"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "N = 10\n",
    "M = 5\n",
    "mat = OrdinationResults(short_method_name='test', long_method_name='test', eigvals=np.arange(N), samples=pd.DataFrame(np.random.random((N, M))))\n",
    "metadata = pd.DataFrame({'random':np.random.randint(1, 5, N)})\n",
    "Emperor(mat, metadata)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "console.log(requirejs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "console.log(requirejs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html \n",
    "\n",
    "<div id='python-penguin' style=\"position: relative; width:100%; height:500px;\"></div>\n",
    "</div>\n",
    "<script type=\"text/javascript\">\n",
    "requirejs.config({\n",
    "'baseUrl': 'https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/',\n",
    "\n",
    "// the left side is the module name, and the right side is the path\n",
    "// relative to the baseUrl attribute, do NOT include the .js extension\n",
    "'paths': {\n",
    "  /* jQuery */\n",
    "  'jquery': './vendor/js/jquery-2.1.4.min',\n",
    "  'jqueryui': './vendor/js/jquery-ui.min',\n",
    "  'jquery_drag': './vendor/js/jquery.event.drag-2.2.min',\n",
    "\n",
    "  /* jQuery plugins */\n",
    "  'chosen': './vendor/js/chosen.jquery.min',\n",
    "  'spectrum': './vendor/js/spectrum.min',\n",
    "\n",
    "  /* other libraries */\n",
    "  'underscore': './vendor/js/underscore-min',\n",
    "  'chroma': './vendor/js/chroma.min',\n",
    "\n",
    "\n",
    "  /* THREE.js and plugins */\n",
    "  'three': './vendor/js/three.min',\n",
    "  'orbitcontrols': './vendor/js/three.js-plugins/OrbitControls',\n",
    "\n",
    "  /* SlickGrid */\n",
    "  'slickcore': './vendor/js/slick.core.min',\n",
    "  'slickgrid': './vendor/js/slick.grid.min',\n",
    "  'slickformatters': './vendor/js/slick.editors.min',\n",
    "  'slickeditors': './vendor/js/slick.formatters.min',\n",
    "\n",
    "  /* Emperor's objects */\n",
    "  'model': './js/model',\n",
    "  'view': './js/view',\n",
    "  'controller': './js/controller',\n",
    "  'scene3d': './js/sceneplotview3d',\n",
    "  'viewcontroller': './js/view-controller',\n",
    "  'colorviewcontroller': './js/color-view-controller',\n",
    "  'visibilitycontroller': './js/visibility-controller',\n",
    "  'color-editor': './js/color-editor',\n",
    "},\n",
    "/*\n",
    "   Libraries that are not AMD compatible need shim to declare their\n",
    "   dependencies.\n",
    " */\n",
    "'shim': {\n",
    "  'jquery_drag': {\n",
    "    'deps': ['jquery', 'jqueryui']\n",
    "  },\n",
    "  'chosen': {\n",
    "    'deps': ['jquery'],\n",
    "    'exports': 'jQuery.fn.chosen'\n",
    "  },\n",
    "  'orbitcontrols': {\n",
    "    'deps': ['three']\n",
    "  },\n",
    "'slickcore': ['jqueryui'],\n",
    "'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters',\n",
    "              'slickeditors']\n",
    "}\n",
    "});\n",
    "\n",
    "requirejs(\n",
    "[\"jquery\", \"model\", \"controller\"],\n",
    "function($, model, EmperorController) {\n",
    "  var DecompositionModel = model.DecompositionModel;\n",
    "\n",
    "  var div = $('#python-penguin');\n",
    "  console.log(div)\n",
    "\n",
    "  var ids = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n",
    "  var coords = [['0.9855966623784432', '0.07372361857158483', '0.7487116808840824', '0.9959915661458756', '0.16341154593034157'], ['0.30241368776872435', '0.5931558339399955', '0.6473619364882136', '0.3040989390789156', '0.31696382445162086'], ['0.4343332555271854', '0.38017944207067766', '0.7216011629058252', '0.49853909478472547', '0.02776536526497808'], ['0.03321807805948862', '0.13826801711963932', '0.9656539280194743', '0.12428135017814057', '0.4912714180052913'], ['0.8135960337126982', '0.6722190909968574', '0.9885311082097087', '0.09100699185469519', '0.1405102381068224'], ['0.635818008822499', '0.36818960902769016', '0.9496160755520842', '0.09936620057655654', '0.2311073807210624'], ['0.2444043719060669', '0.9881279110775005', '0.4353019848499552', '0.8872954242225446', '0.6146408099456937'], ['0.9795842740234685', '0.4795291625009903', '0.6095588404346244', '0.7254296397430284', '0.40371365433550677'], ['0.32018628355892687', '0.6003307603412218', '0.16931266896978325', '0.7592101257908582', '0.9297138737406898'], ['0.9783695226102468', '0.41841594553347994', '0.5413888430919861', '0.2950973878373129', '0.12047348647650946']];\n",
    "  var pct_var = None;\n",
    "  var md_headers = ['random'];\n",
    "  var metadata = [['2'], ['4'], ['1'], ['4'], ['3'], ['1'], ['4'], ['1'], ['1'], ['2']];\n",
    "\n",
    "  var dm, ec;\n",
    "\n",
    "  function init() {\n",
    "    // Initialize the DecompositionModel\n",
    "    dm = new DecompositionModel(name, ids, coords, pct_var,\n",
    "                                md_headers, metadata);\n",
    "    // Initialize the EmperorController\n",
    "    ec = new EmperorController(dm, 'python-penguin');\n",
    "    lol = ec\n",
    "  }\n",
    "\n",
    "  function animate() {\n",
    "    requestAnimationFrame(animate);\n",
    "    ec.render();\n",
    "  }\n",
    "  $(window).resize(function() {\n",
    "    ec.resize(window.innerWidth, window.innerHeight);\n",
    "  });\n",
    "\n",
    "  $(function(){\n",
    "    init();\n",
    "    animate();\n",
    "\n",
    "  });\n",
    "\n",
    "}); // END REQUIRE.JS block\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/css/emperor.css\">\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/css/jquery-ui.min.css\">\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/css/slick.grid.min.css\">\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/css/spectrum.min.css\">\n",
    "    <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/css/chosen.min.css\">\n",
    "\n",
    "    <style>\n",
    "      div.emperor-space{\n",
    "        position: fixed;\n",
    "        height: 100%;\n",
    "        width: 100%;\n",
    "        height: 100vh;\n",
    "        width: 100vw;\n",
    "        margin: 0;\n",
    "      }\n",
    "    </style>\n",
    "\n",
    "    <script type=\"text/javascript\" src=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/js/require-2.1.22.min.js\"></script>\n",
    "    <div id='plots' style='width:500; height:500'></div>\n",
    "    <script type=\"text/javascript\">\n",
    "      requirejs.config({\n",
    "        'baseUrl': 'https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/',\n",
    "\n",
    "        // the left side is the module name, and the right side is the path\n",
    "        // relative to the baseUrl attribute, do NOT include the .js extension\n",
    "        'paths': {\n",
    "          /* jQuery */\n",
    "          'jquery': './vendor/js/jquery-2.1.4.min',\n",
    "          'jqueryui': './vendor/js/jquery-ui.min',\n",
    "          'jquery_drag': './vendor/js/jquery.event.drag-2.2.min',\n",
    "\n",
    "          /* jQuery plugins */\n",
    "          'chosen': './vendor/js/chosen.jquery.min',\n",
    "          'spectrum': './vendor/js/spectrum.min',\n",
    "\n",
    "          /* other libraries */\n",
    "          'underscore': './vendor/js/underscore-min',\n",
    "          'chroma': './vendor/js/chroma.min',\n",
    "\n",
    "          /* THREE.js and plugins */\n",
    "          'three': './vendor/js/three.min',\n",
    "          'orbitcontrols': './vendor/js/three.js-plugins/OrbitControls',\n",
    "\n",
    "          /* SlickGrid */\n",
    "          'slickcore': './vendor/js/slick.core.min',\n",
    "          'slickgrid': './vendor/js/slick.grid.min',\n",
    "          'slickformatters': './vendor/js/slick.editors.min',\n",
    "          'slickeditors': './vendor/js/slick.formatters.min',\n",
    "\n",
    "          /* Emperor's objects */\n",
    "          'model': './js/model',\n",
    "          'view': './js/view',\n",
    "          'controller': './js/controller',\n",
    "          'draw': './js/draw',\n",
    "          'scene3d': './js/sceneplotview3d',\n",
    "          'viewcontroller': './js/view-controller',\n",
    "          'colorviewcontroller': './js/color-view-controller',\n",
    "          'visibilitycontroller': './js/visibility-controller',\n",
    "          'axescontroller': './js/axes-view-controller',\n",
    "          'color-editor': './js/color-editor',\n",
    "        },\n",
    "        /*\n",
    "           Libraries that are not AMD compatible need shim to declare their\n",
    "           dependencies.\n",
    "         */\n",
    "        'shim': {\n",
    "          'jquery_drag': {\n",
    "            'deps': ['jquery', 'jqueryui']\n",
    "          },\n",
    "          'chosen': {\n",
    "            'deps': ['jquery'],\n",
    "            'exports': 'jQuery.fn.chosen'\n",
    "          },\n",
    "          'orbitcontrols': {\n",
    "            'deps': ['three']\n",
    "          },\n",
    "        'slickcore': ['jqueryui'],\n",
    "        'slickgrid': ['slickcore', 'jquery_drag', 'slickformatters',\n",
    "                      'slickeditors']\n",
    "        }\n",
    "      });\n",
    "\n",
    "      requirejs(\n",
    "        [\"jquery\", \"model\", \"controller\"],\n",
    "        function($, model, EmperorController) {\n",
    "          var DecompositionModel = model.DecompositionModel;\n",
    "\n",
    "          // $(\"<div id='plots' class='emperor-space'></div>\").appendTo(document.body);\n",
    "          var div = $('#plots');\n",
    "\n",
    "          var ids = ['0', '1', '2', '3', '4'];\n",
    "          var coords = [[-0.8630290551384004, -0.7630314152905315, -1.9705967683869958, -0.23989579370718336, 1.0154973837804908, -0.21179371899320992, 0.4712809760986827, -0.761120503073177, -0.3519446829547298, -1.9928658375395865], [0.6378398063215314, -1.19745694024307, -1.3516037828359597, -0.1867896397044656, 0.79574770409843, 0.9562986783634321, -1.1250166678182227, -1.1909359123902117, -0.06555400122688035, 0.03239224220144888], [0.3782803103009417, 0.32094856193943283, -1.0665001630999782, 1.2001195541825052, 1.176518030756881, -0.07487344645364565, 1.2984700762920083, -0.27699919641599785, 0.23423252871215794, -1.427532510071714], [-0.9279353620878198, -0.4789612605843567, 0.5356873023695592, 0.09056261848355943, 0.5168008626546543, 1.5057653021718258, -1.4428692283531894, 0.04650844650784848, 0.18356206036228961, 0.4605293713029499], [0.8212720398169213, -1.6246678398987136, -0.5974684081082006, -3.148012744183315, -1.5495901808052526, -1.391502351798361, 0.05197642417969313, -1.2730052096466216, 0.14182233657536614, 0.4587015463293033]];\n",
    "          var pct_var = [1.0, 0.36787944117144233, 0.1353352832366127, 0.049787068367863944, 0.018315638888734182, 0.006737946999085467, 0.0024787521766663585, 0.0009118819655545162, 0.00033546262790251185, 0.00012340980408667953];\n",
    "          var md_headers = ['SampleID', 'DOB'];\n",
    "          var metadata = [['0', '341'], ['1', '83'], ['2', '83'], ['3', '83'], ['4', '179']];\n",
    "\n",
    "          var dm;\n",
    "\n",
    "          function init() {\n",
    "            // Initialize the DecompositionModel\n",
    "            dm = new DecompositionModel(name, ids, coords, pct_var,\n",
    "                                        md_headers, metadata);\n",
    "            // Initialize the EmperorController\n",
    "            ec = new EmperorController(dm, 'plots');\n",
    "          }\n",
    "\n",
    "          $(window).resize(function() {\n",
    "            ec.resize(window.innerWidth, window.innerHeight);\n",
    "          });\n",
    "\n",
    "          function animate() {\n",
    "            requestAnimationFrame(animate);\n",
    "            ec.render();\n",
    "          }\n",
    "\n",
    "          $(function () {\n",
    "            init();\n",
    "            animate();\n",
    "          });\n",
    "\n",
    "          $(document).ready(function(){\n",
    "             ec.resize(window.innerWidth, window.innerHeight);\n",
    "          });\n",
    "\n",
    "      }); // END REQUIRE.JS block\n",
    "    </script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "// x = requirejs('$')\n",
    "// console.log(x)\n",
    "x = requirejs('jquery')\n",
    "console.log(x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "if ($(\"#emperor-css\").length == 0){\n",
    "    $(\"head\").append([\n",
    "\n",
    "        '<link id=\"emperor-css\" rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/css/emperor.css\">',\n",
    "        '<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/css/jquery-ui.min.css\">',\n",
    "        '<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/css/slick.grid.min.css\">',\n",
    "        '<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/css/spectrum.min.css\">',\n",
    "        '<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.rawgit.com/biocore/emperor/new-api/emperor/support_files/vendor/css/chosen.min.css\">'\n",
    "    ]);\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "\n",
    "<script>\n",
    "console.log($)\n",
    "</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
