cobra.js.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import cobra.test\n",
    "\n",
    "model = cobra.test.create_test_model(\"textbook\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "import traitlets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "class COBRAwidget(widgets.DOMWidget):\n",
    "    _view_name = traitlets.Unicode(\"CobraView\", sync=True)\n",
    "    model_dict = traitlets.Dict(sync=True)\n",
    "\n",
    "    def __init__(self, cobra_model):\n",
    "        widgets.DOMWidget.__init__(self)\n",
    "        self.cobra_model = cobra_model\n",
    "        self.model_dict = cobra.io.json._to_dict(cobra_model)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({paths: {datatables: \"//cdn.datatables.net/1.10.8/js/jquery.dataTables\",\n",
       "                        escher: \"//escher.github.io/escher/lib/d3.min\"}})\n",
       "require([\"widgets/js/widget\", \"widgets/js/manager\", \"datatables\"],\n",
       "        function(widget, manager, datatables){\n",
       "    var CobraView = widget.DOMWidgetView.extend({\n",
       "        render: function (){\n",
       "            var reactions_div = $(\"<div style='width: 900px;'/>\").uniqueId();\n",
       "            var metabolites_div = $(\"<div style='width: 900px;'/>\").uniqueId();\n",
       "            this.$reactions = $(\"<table style='width: 100%'/>\")\n",
       "            reactions_div.append(this.$reactions)\n",
       "            this.$metabolites = $(\"<table style='width: 100%'/>\")\n",
       "            metabolites_div.append(this.$metabolites)\n",
       "            this.$map = $(\"<div style='width: 900px; height: 500px;'/>\").uniqueId();            \n",
       "\n",
       "            var tab_div = $(\"<div/>\");\n",
       "            var tab_list = $(\"<ul></ul>\");\n",
       "            \n",
       "            \n",
       "            tab_list.append($(\"<li>\").append($(\"<a>Reactions</a>\").attr(\"href\", \"#\" + reactions_div[0][\"id\"])));\n",
       "            tab_list.append($(\"<li>\").append($(\"<a>Metabolites</a>\").attr(\"href\", \"#\" + metabolites_div[0][\"id\"])));\n",
       "            tab_list.append($(\"<li>\").append($(\"<a>Map</a>\").attr(\"href\", \"#\" + this.$map.attr(\"id\"))));\n",
       "            tab_div.append(tab_list);\n",
       "\n",
       "            tab_div.append(reactions_div);\n",
       "            tab_div.append(metabolites_div)\n",
       "            tab_div.append(this.$map)\n",
       "            \n",
       "            tab_div.append(\"<link rel='stylesheet' type='text/css' href='//cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css'>\")\n",
       "            \n",
       "            this.$el.append(tab_div);\n",
       "            tab_div.tabs();\n",
       "            this.update();\n",
       "\n",
       "       },\n",
       "       \n",
       "       update: function() {\n",
       "           var model_info = this.model.get(\"model_dict\");\n",
       "           console.log(model_info.metabolites[0])\n",
       "           //console.log(this.$reactions[0].id);\n",
       "           this.$reactions.dataTable({\n",
       "               data: model_info.reactions,\n",
       "               columns: [{data: 'id', title: 'id'},\n",
       "                         {data: 'name', title: 'name'},\n",
       "                         {data: 'lower_bound', title: 'lower_bound'},\n",
       "                         {data: 'upper_bound', title: 'upper_bound'}]\n",
       "           });\n",
       "           this.$metabolites.dataTable({\n",
       "               data: model_info.metabolites,\n",
       "               columns: [{data: 'id', title: 'id'},\n",
       "                         {data: 'name', title: 'name'},\n",
       "                         {data: 'formula', title: 'formula'},\n",
       "                         {data: 'charge', title: 'charge', defaultContent: ''},\n",
       "                        ]\n",
       "           });\n",
       "           //return CobraView.__super__.update.apply(this);\n",
       "           \n",
       "       },\n",
       "    });\n",
       "    manager.WidgetManager.register_widget_view('CobraView', CobraView)\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.config({paths: {datatables: \"//cdn.datatables.net/1.10.8/js/jquery.dataTables\",\n",
    "                        escher: \"//escher.github.io/escher/lib/d3.min\"}})\n",
    "require([\"widgets/js/widget\", \"widgets/js/manager\", \"datatables\"],\n",
    "        function(widget, manager, datatables){\n",
    "    var CobraView = widget.DOMWidgetView.extend({\n",
    "        render: function (){\n",
    "            var reactions_div = $(\"<div style='width: 900px;'/>\").uniqueId();\n",
    "            var metabolites_div = $(\"<div style='width: 900px;'/>\").uniqueId();\n",
    "            this.$reactions = $(\"<table style='width: 100%'/>\")\n",
    "            reactions_div.append(this.$reactions)\n",
    "            this.$metabolites = $(\"<table style='width: 100%'/>\")\n",
    "            metabolites_div.append(this.$metabolites)\n",
    "            this.$map = $(\"<div style='width: 900px; height: 500px;'/>\").uniqueId();            \n",
    "\n",
    "            var tab_div = $(\"<div/>\");\n",
    "            var tab_list = $(\"<ul></ul>\");\n",
    "            \n",
    "            \n",
    "            tab_list.append($(\"<li>\").append($(\"<a>Reactions</a>\").attr(\"href\", \"#\" + reactions_div[0][\"id\"])));\n",
    "            tab_list.append($(\"<li>\").append($(\"<a>Metabolites</a>\").attr(\"href\", \"#\" + metabolites_div[0][\"id\"])));\n",
    "            tab_list.append($(\"<li>\").append($(\"<a>Map</a>\").attr(\"href\", \"#\" + this.$map.attr(\"id\"))));\n",
    "            tab_div.append(tab_list);\n",
    "\n",
    "            tab_div.append(reactions_div);\n",
    "            tab_div.append(metabolites_div)\n",
    "            tab_div.append(this.$map)\n",
    "            \n",
    "            tab_div.append(\"<link rel='stylesheet' type='text/css' href='//cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css'>\")\n",
    "            \n",
    "            this.$el.append(tab_div);\n",
    "            tab_div.tabs();\n",
    "            this.update();\n",
    "\n",
    "       },\n",
    "       \n",
    "       update: function() {\n",
    "           var model_info = this.model.get(\"model_dict\");\n",
    "           console.log(model_info.metabolites[0])\n",
    "           //console.log(this.$reactions[0].id);\n",
    "           this.$reactions.dataTable({\n",
    "               data: model_info.reactions,\n",
    "               columns: [{data: 'id', title: 'id'},\n",
    "                         {data: 'name', title: 'name'},\n",
    "                         {data: 'lower_bound', title: 'lower_bound'},\n",
    "                         {data: 'upper_bound', title: 'upper_bound'}]\n",
    "           });\n",
    "           this.$metabolites.dataTable({\n",
    "               data: model_info.metabolites,\n",
    "               columns: [{data: 'id', title: 'id'},\n",
    "                         {data: 'name', title: 'name'},\n",
    "                         {data: 'formula', title: 'formula'},\n",
    "                         {data: 'charge', title: 'charge', defaultContent: ''},\n",
    "                        ]\n",
    "           });\n",
    "           //return CobraView.__super__.update.apply(this);\n",
    "           \n",
    "       },\n",
    "    });\n",
    "    manager.WidgetManager.register_widget_view('CobraView', CobraView)\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "w = COBRAwidget(model)\n",
    "w"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}