{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "8ef47cb2-812a-4cd1-87d3-0a6573ab0a5c",
   "metadata": {},
   "outputs": [],
   "source": [
    "#import set_path                    # Using MyBinder?  Uncomment this before running the next cell!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "3924c013",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "#import sys\n",
    "#sys.path.append(\"C:/some_path/my_env_or_install\")   # CHANGE to the folder containing your venv or libraries installation!\n",
    "# NOTE: If any of the imports below can't find a module, uncomment the lines above, or try:  import set_path\n",
    "\n",
    "import ipynbname\n",
    "\n",
    "from life123 import check_version, ChemData, UniformCompartment, PlotlyHelper, GraphicLog, DisplayNetwork"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "83c3cc5f-de21-4f66-9988-2806fbf0666d",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "-> Output will be LOGGED into the file 'cascade_test.log.htm'\n"
     ]
    }
   ],
   "source": [
    "# Initialize the HTML logging (for the graphics)\n",
    "log_file = ipynbname.name() + \".log.htm\"    # Use the notebook base filename for the log file\n",
    "\n",
    "# Set up the use of some specified graphic (Vue) components\n",
    "GraphicLog.config(filename=log_file,\n",
    "                  components=[\"vue_cytoscape_2\"],\n",
    "                  extra_js=\"https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.21.2/cytoscape.umd.js\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "72b4245c-de4e-480d-a501-3495b7ed8bc4",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Number of reactions:  2\n"
     ]
    }
   ],
   "source": [
    "# Specify the chemicals and the reactions; this data structure will get re-used in \n",
    "# the various simulations below\n",
    "chem_data = ChemData()\n",
    "\n",
    "uc = UniformCompartment(chem_data=chem_data, preset=\"slower\")\n",
    "\n",
    "# Reaction A <-> B (fast)\n",
    "uc.add_reaction(reactants=\"A\", products=\"B\",\n",
    "                       kF=64., kR=8.) \n",
    "\n",
    "# Reaction B <-> C (slow)\n",
    "uc.add_reaction(reactants=\"B\", products=\"C\",\n",
    "                       kF=12., kR=2.) \n",
    "\n",
    "print(\"Number of reactions: \", uc.number_of_reactions())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "00ea560d-9a49-4041-b119-6de11bfcc7af",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Number of reactions: 2\n",
      "0: A <-> B  (Elementary Unimolecular reaction)  (kF = 64 / kR = 8 / delta_G = -5,154.8 / K = 8 / Temp = 25 C)\n",
      "1: B <-> C  (Elementary Unimolecular reaction)  (kF = 12 / kR = 2 / delta_G = -4,441.7 / K = 6 / Temp = 25 C)\n",
      "Chemicals involved in the above reactions: ['A', 'B', 'C']\n"
     ]
    }
   ],
   "source": [
    "uc.describe_reactions()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "cb582868-431c-4022-aa0e-a2f554f80d6c",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[GRAPHIC ELEMENT SENT TO LOG FILE `cascade_test.log.htm`]\n"
     ]
    }
   ],
   "source": [
    "# Send a plot of the network of reactions to the HTML log file\n",
    "rnxs = uc.get_reactions()\n",
    "\n",
    "rnxs.plot_reaction_network(\"vue_cytoscape_2\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c9ac12d6-481e-4181-84a8-a4d0b251c3d7",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "74a1e2bd-4e82-4aaa-a68f-7cee52b2ebbf",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{'structure': [{'name': 'RXN',\n",
       "   'kF': '64',\n",
       "   'kR': '8',\n",
       "   'delta_G': '-5,154.85',\n",
       "   'K': '8',\n",
       "   'id': 'R-0',\n",
       "   'labels': ['Reaction']},\n",
       "  {'name': 'B', 'diff_rate': None, 'id': 'C-1', 'labels': ['Chemical']},\n",
       "  {'name': 'produces',\n",
       "   'source': 'R-0',\n",
       "   'target': 'C-1',\n",
       "   'id': 'edge-1',\n",
       "   'stoich': 1,\n",
       "   'rxn_order': 1},\n",
       "  {'name': 'A', 'diff_rate': None, 'id': 'C-0', 'labels': ['Chemical']},\n",
       "  {'name': 'reacts',\n",
       "   'source': 'C-0',\n",
       "   'target': 'R-0',\n",
       "   'id': 'edge-2',\n",
       "   'stoich': 1,\n",
       "   'rxn_order': 1},\n",
       "  {'name': 'RXN',\n",
       "   'kF': '12',\n",
       "   'kR': '2',\n",
       "   'delta_G': '-4,441.69',\n",
       "   'K': '6',\n",
       "   'id': 'R-1',\n",
       "   'labels': ['Reaction']},\n",
       "  {'name': 'C', 'diff_rate': None, 'id': 'C-2', 'labels': ['Chemical']},\n",
       "  {'name': 'produces',\n",
       "   'source': 'R-1',\n",
       "   'target': 'C-2',\n",
       "   'id': 'edge-3',\n",
       "   'stoich': 1,\n",
       "   'rxn_order': 1},\n",
       "  {'name': 'reacts',\n",
       "   'source': 'C-1',\n",
       "   'target': 'R-1',\n",
       "   'id': 'edge-4',\n",
       "   'stoich': 1,\n",
       "   'rxn_order': 1}],\n",
       " 'color_mapping': {'Chemical': '#8DCC92', 'Reaction': '#D9C8AD'},\n",
       " 'caption_mapping': {'Chemical': 'name', 'Reaction': 'name'}}"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "rxn_graph_data = rnxs.prepare_graph_network()\n",
    "rxn_graph_data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "79e454e2-576e-479c-a500-9715acc8d62a",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "e22d5b3f-ae06-49e2-8e44-133d1a162691",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "structure = [{'id': 'n1', 'labels': ['label_1'], 'name': 'A', 'field_1': 123},\n",
    "             {'id': 'n2', 'labels': ['label_2'], 'name': 'B', 'field_1': 8},\n",
    "\n",
    "             {'id': 'edge-1', 'name': 'produces', 'source': 'n1', 'target': 'n2', 'link_prop': \"hello\"}\n",
    "           ]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "d59bdf36-861e-4389-a818-c2ec6e9a03a7",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "color_mapping = {'label_1': '#8DCC92', 'label_2': '#D9C8AD'}\n",
    "caption_mapping = {'label_1': 'name', 'label_2': 'name'}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "4982af32-64e2-4cfa-b03a-df8abdf8ea37",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{'structure': [{'id': 'n1',\n",
       "   'labels': ['label_1'],\n",
       "   'name': 'A',\n",
       "   'field_1': 123},\n",
       "  {'id': 'n2', 'labels': ['label_2'], 'name': 'B', 'field_1': 8},\n",
       "  {'id': 'edge-1',\n",
       "   'name': 'produces',\n",
       "   'source': 'n1',\n",
       "   'target': 'n2',\n",
       "   'link_prop': 'hello'}],\n",
       " 'color_mapping': {'label_1': '#8DCC92', 'label_2': '#D9C8AD'},\n",
       " 'caption_mapping': {'label_1': 'name', 'label_2': 'name'}}"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "fig = {\"structure\": structure, \"color_mapping\": color_mapping, \"caption_mapping\": caption_mapping}\n",
    "fig"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3b0e89d1-4cc3-4ee8-bbd6-1e0cd98814d3",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "66efca42-2d3a-4775-9cf3-a2edc7b35dae",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[GRAPHIC ELEMENT SENT TO LOG FILE `cascade_test.log.htm`]\n"
     ]
    }
   ],
   "source": [
    "# Send a plot of the network of reactions to the HTML log file\n",
    "GraphicLog.export_plot(graph_data=fig, graphic_component=\"vue_cytoscape_2\", unpack=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cd8a210b-9c62-4062-b207-dd5be3813dae",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "29adac9a-d452-4eb1-8e26-af0a1e5d6fe7",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "simplified = {'structure': \n",
    "              [\n",
    "                  {'id': 'n-0',\n",
    "                   'labels': ['label_1'],\n",
    "                   'name': 'Company A',\n",
    "                   'my_field': 1234\n",
    "                  },\n",
    "\n",
    "                  {'id': 'n-1', \n",
    "                   'labels': ['label_2'],\n",
    "                   'name': 'Customer B',\n",
    "                   'my_field': 88\n",
    "                  },\n",
    "               \n",
    "                  {'name': 'SELLS_TO',\n",
    "                   'source': 'n-0',\n",
    "                   'target': 'n-1',\n",
    "                   'id': 'edge-1',\n",
    "                   'edge_prop': \"some value for the link\"\n",
    "                  }\n",
    "              ],\n",
    "              \n",
    "             'color_mapping': {'label_1': '#8DCC92', 'label_2': '#D9C8AD'},\n",
    "             'caption_mapping': {'label_1': 'name', 'label_2': 'name'}\n",
    "             }"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6ea02ecc-6376-4389-9eee-4050bebc03ae",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "6d90ab7d-1ed4-4ed8-be69-8c15cfd5a7ba",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[GRAPHIC ELEMENT SENT TO LOG FILE `cascade_test.log.htm`]\n"
     ]
    }
   ],
   "source": [
    "GraphicLog.export_plot(simplified, \"vue_cytoscape_2\", unpack=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "db81ec34-2023-4bb8-96aa-6356380ed8a0",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "156cde41-c234-447d-8fda-fe42614469c2",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6b34f996-9862-4fc1-aebf-772b72aaf2ef",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "id": "ca23d014-dd1f-44f1-84e1-f6f017145d1a",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "class SimpleGraphic:\n",
    "    \n",
    "    @classmethod\n",
    "    def _write_to_file(cls, file_handler, text :str) -> None:\n",
    "        file_handler.write(text)\n",
    "        file_handler.flush()    # To avoid weird buffering issues seen in JupyterLab\n",
    "        \n",
    "      \n",
    "    \n",
    "    @classmethod  \n",
    "    def _html_header(cls) -> str:\n",
    "        return '''<!-- Auto-generated log file -->\n",
    "<!DOCTYPE html>\n",
    "<html lang=\"en\">\n",
    "<head>  \n",
    "    <meta charset=\"UTF-8\">\n",
    "    <title>Cytoscape graphics</title>\n",
    "\n",
    "    <link type=\"text/css\" rel=\"stylesheet\" href=\"https://life123.science/libraries/vue_components/vue_cytoscape_2.css\">\n",
    "\n",
    "    <script src=\"https://life123.science/libraries/vue_2.6.12.js\"></script>\n",
    "    <script src=\"https://d3js.org/d3.v7.min.js\"></script>\n",
    "    <script src=\"https://life123.science/libraries/svg_helper_1.2.js\"></script>\n",
    "    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.21.2/cytoscape.umd.js\"></script>\n",
    "</head>\n",
    "\n",
    "'''\n",
    "\n",
    "    \n",
    "    @classmethod  \n",
    "    def _html_body_start(cls, caption=None) -> str:\n",
    "        return f'''\n",
    "<body>\n",
    "\n",
    "{caption}\n",
    "        \n",
    "'''\n",
    "\n",
    "    \n",
    "    @classmethod \n",
    "    def _html_vue_container(cls, vue_component :str, component_file :str, graph_data :dict, vue_count=1) -> str:\n",
    "        \"\"\"\n",
    "        Generate and return the HTML for a Vue container (a DIV element with the Vue ROOT component),\n",
    "        plus a script to instantiate the above Vue root component\n",
    "        \"\"\"\n",
    "        \n",
    "        vue_id = f\"vue-root-{vue_count}\"    # EXAMPLE: \"vue-root-1\"\n",
    "        \n",
    "        return f'''\n",
    "\n",
    "<div id=\"{vue_id}\">   <!-- DIV container for the VUE COMPONENTS below : Vue ROOT element -->\n",
    "\n",
    "    <{vue_component} v-bind:graph_data=\"graph_data_json\"\n",
    "                     v-bind:component_id=\"{vue_count}\">        \n",
    "    </{vue_component}>\n",
    "\n",
    "</div>    <!--  ~~~~~~~~~~~~~~~~~~~~~  END of Vue root element  ~~~~~~~~~~~~~~~~~  -->\n",
    "\n",
    "\n",
    "\n",
    "<!--\n",
    "    Vue components (and other JS).  These must appear AFTER the Vue-containing elements\n",
    "  -->\n",
    "<script src=\"{component_file}\"></script>\n",
    "\n",
    "\n",
    "\n",
    "<script>\n",
    "    // Instantiation of the Vue ROOT component\n",
    "    new Vue({{\n",
    "        el: '#{vue_id}',\n",
    "\n",
    "        data: {{\n",
    "            graph_data_json: {json.dumps(graph_data, indent=4)}\n",
    "        }}  // END of data\n",
    "\n",
    "    }});\n",
    "</script>\n",
    "        '''\n",
    "    \n",
    "    \n",
    "    @classmethod\n",
    "    def export_plot(cls, graph_data :dict, graphic_component :str, filename :str) -> None:\n",
    "        \"\"\"\n",
    "        Send to the log file the data to create a Vue-based plot.\n",
    "        This is meant to work alongside Vue components that expects 2 arguments (\"props\"):\n",
    "            1) graph_data\n",
    "            2) component_id\n",
    "\n",
    "        :param graph_data:          A python dictionary of data to pass to the Vue component\n",
    "        :param graphic_component:   A string with the name of the existing Vue.js component to use.\n",
    "                                        EXAMPLE: \"vue_curves_4\" (assuming that a js file with such a Vue component exists)\n",
    "        :return:                    None\n",
    "        \"\"\"\n",
    "        # Perform data validation\n",
    "        assert type(graph_data) == dict, \"export_plot(): argument `graph_data` must be a python dictionary\"\n",
    "\n",
    "        assert len(graph_data) == 3, \\\n",
    "                \"export_plot(): argument `graph_data` must contains exactly 3 keys, named 'structure', 'color_mapping', 'caption_mapping'\"\n",
    "\n",
    "        assert ('structure' in graph_data) and type(graph_data['structure']) == list, \\\n",
    "                f\"export_plot(): the argument `graph_data` must contain a key named 'structure' whose value is a list.  Passed value: {graph_data.get('structure')}\"\n",
    "\n",
    "        assert ('color_mapping' in graph_data) and type(graph_data['color_mapping']) == dict, \\\n",
    "                f\"export_plot(): the argument `graph_data` must contain a key named 'color_mapping' whose value is a python dictionary.  Passed value: {graph_data.get('color_mapping')}\"\n",
    "\n",
    "        assert ('caption_mapping' in graph_data) and type(graph_data['caption_mapping']) == dict, \\\n",
    "                f\"export_plot(): the argument `graph_data` must contain a key named 'caption_mapping' whose value is a python dictionary.  Passed value: {graph_data.get('caption_mapping')}\"\n",
    "       \n",
    "        # TODO: make sure that `filename` ends with \".htm\"\n",
    "\n",
    "        \n",
    "        # Prepare writing into the file (OVERWRITE)\n",
    "        \n",
    "        file_handler = open(filename, \"w\")      # Create a new file, to write to; over-write if present\n",
    "                \n",
    "        \n",
    "        # Export into the HTML log file the various Vue-related parts\n",
    "        \n",
    "        VUE_COMPS_DIR = \"https://life123.science/libraries/vue_components/\"\n",
    "        component_file = f\"{VUE_COMPS_DIR}{graphic_component}.js\"\n",
    "        \n",
    "        html = cls._html_header() + cls._html_body_start(caption=\"<h1>Interactive graph plot</h1>\") + \\\n",
    "               cls._html_vue_container(vue_component=graphic_component, vue_count=1, component_file=component_file, graph_data=graph_data)\n",
    "        \n",
    "        cls._write_to_file(file_handler, text = html)\n",
    "             \n",
    "                           \n",
    "        print(f\"[GRAPHIC ELEMENT SENT TO FILE `{filename}`]\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "319d2689-c01c-4527-bd47-e38e7aac87eb",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "id": "e8ecd8a9-eb5a-4b1d-9ab5-5184af6babef",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import json"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "id": "851ee0a7-12c2-4af2-97da-7cf11f3b14c9",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[GRAPHIC ELEMENT SENT TO FILE `cascade_test.SIMPLIFIED.htm`]\n"
     ]
    }
   ],
   "source": [
    "SimpleGraphic.export_plot(graph_data=simplified, graphic_component=\"vue_cytoscape_2\", filename=\"cascade_test.SIMPLIFIED.htm\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5a3e516d-5c0b-4232-b5db-12383b899775",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "c654ce5f-1399-47e1-9d0a-3298826b2d5f",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "[GRAPHIC ELEMENT SENT TO FILE `cascade_my_test.htm`]\n"
     ]
    }
   ],
   "source": [
    "DisplayNetwork.export_plot(graph_data=simplified, graphic_component=\"vue_cytoscape_2\", filename=\"cascade_my_test\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "004271a6-db10-4480-a7cf-e44eb21a047c",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.9.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}