{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "b73a0c39-48d2-43fc-94b1-bb16b5301631",
   "metadata": {
    "tags": []
   },
   "source": [
    "# Using the JSME widget\n",
    "\n",
    "We will first import the `trident_chemwidgets` package."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "329c257f-0c79-418d-b08b-d66c8cb0a548",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2022-04-05T13:40:50.450590Z",
     "iopub.status.busy": "2022-04-05T13:40:50.450590Z",
     "iopub.status.idle": "2022-04-05T13:40:51.210605Z",
     "shell.execute_reply": "2022-04-05T13:40:51.210605Z"
    }
   },
   "outputs": [],
   "source": [
    "import trident_chemwidgets as tcw"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0151a38f-dc5a-42c7-92f1-6f61ff35a6a8",
   "metadata": {},
   "source": [
    "We can the use the `JSME` widget provided by `tcw` to launch an instance of the JSME molecule editor directly in the cell."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "2cbb25a6-aea2-4995-85e0-fbf9bcaddf97",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2022-04-05T13:40:51.214609Z",
     "iopub.status.busy": "2022-04-05T13:40:51.214609Z",
     "iopub.status.idle": "2022-04-05T13:40:51.226574Z",
     "shell.execute_reply": "2022-04-05T13:40:51.225595Z"
    }
   },
   "outputs": [],
   "source": [
    "jsme = tcw.JSME()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f019c652",
   "metadata": {},
   "source": [
    "<div align='center'>\n",
    "<img src='https://raw.githubusercontent.com/tridentbio/trident-chemwidgets/master/examples/gifs/jsme_demo_small.gif'/>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "338a03b8-6e19-4f1d-b3b3-ebdb53ee9bbb",
   "metadata": {},
   "source": [
    "The JSME widget offers a few extensions over the base `JSME` interface. First, it can store a list of input molecules. You can add to this list by hitting the `ADD TO SMILES LIST` button below the interface once a desired structure has been input. Note that the interface will not clear when this button is hit, in case you would like to add derivative molecules to the input list as well. A depiction of the structure, and all others that have been added to the saved internal molecule list will be displayed in the gallery to the right. You can access the list of input smiles using the `smiles` property of the widget, as shown below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "af60622f-61a8-4616-bf95-f7a724d13150",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2022-04-05T13:40:51.230575Z",
     "iopub.status.busy": "2022-04-05T13:40:51.229627Z",
     "iopub.status.idle": "2022-04-05T13:40:51.257570Z",
     "shell.execute_reply": "2022-04-05T13:40:51.256590Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[]"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "jsme.smiles"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0d9c9188-10f6-4771-ba9a-a3e038e0c093",
   "metadata": {},
   "source": [
    "### Using a base SMILES string for derivative molecules\n",
    "\n",
    "The second extended feature of the `tcw` implementation of JSME is the ability to define a base SMILES string for your input. This feature is particularly helpful if you are defining a set of related molecules that are all derived from a similar scaffold. Below we set the SMILES string of ibuprofen as our base SMILES. Here, we can draw derivative compounds and add them to our list, as in the example above. However, since we have defined a base SMILES string, we also have the ability to reset the input window to this base molecule to draw in another derivative by clicking the `RESET TO BASE SMILES` button. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "0061bf2b-681a-4794-bbfd-f949e27cd4e6",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2022-04-05T13:40:51.262568Z",
     "iopub.status.busy": "2022-04-05T13:40:51.261568Z",
     "iopub.status.idle": "2022-04-05T13:40:51.272572Z",
     "shell.execute_reply": "2022-04-05T13:40:51.271568Z"
    }
   },
   "outputs": [],
   "source": [
    "jsme = tcw.JSME(base_smiles='CC(C)Cc1ccc(cc1)[C@@H](C)C(=O)O')\n",
    "# jsme # Uncomment this line to run locally"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2ce4a75e-6f14-4ce6-9a07-69f8353e819b",
   "metadata": {},
   "source": [
    "Here you can access your list of SMILES strings by using the `smiles` property, as in the example above. You can also access the base SMILES string using the `base_smiles` property."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "16bb3ee8-8f74-4df6-ac7d-7231e391d261",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2022-04-05T13:40:51.276572Z",
     "iopub.status.busy": "2022-04-05T13:40:51.276572Z",
     "iopub.status.idle": "2022-04-05T13:40:51.287739Z",
     "shell.execute_reply": "2022-04-05T13:40:51.286738Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[]"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "jsme.smiles"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "8de6138d-95a4-4830-bb80-129b40ca30f9",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2022-04-05T13:40:51.290773Z",
     "iopub.status.busy": "2022-04-05T13:40:51.290773Z",
     "iopub.status.idle": "2022-04-05T13:40:51.302883Z",
     "shell.execute_reply": "2022-04-05T13:40:51.302016Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'CC(C)Cc1ccc(cc1)[C@@H](C)C(=O)O'"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "jsme.base_smiles"
   ]
  }
 ],
 "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.8.12"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "454c63d8086e4f99811c484710b4a643": {
      "model_module": "trident-chemwidgets",
      "model_module_version": "^0.1.0",
      "model_name": "JsmeModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "trident-chemwidgets",
       "_model_module_version": "^0.1.0",
       "_model_name": "JsmeModel",
       "_view_count": null,
       "_view_module": "trident-chemwidgets",
       "_view_module_version": "^0.1.0",
       "_view_name": "JsmeView",
       "base_smiles": "",
       "layout": "IPY_MODEL_b7b96ad6eb6041c186e9584296bae071",
       "smiles": []
      }
     },
     "91b3e4d98ca642e69bdd692f1641f31c": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "b7b96ad6eb6041c186e9584296bae071": {
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "model_name": "LayoutModel",
      "state": {
       "_model_module": "@jupyter-widgets/base",
       "_model_module_version": "1.2.0",
       "_model_name": "LayoutModel",
       "_view_count": null,
       "_view_module": "@jupyter-widgets/base",
       "_view_module_version": "1.2.0",
       "_view_name": "LayoutView",
       "align_content": null,
       "align_items": null,
       "align_self": null,
       "border": null,
       "bottom": null,
       "display": null,
       "flex": null,
       "flex_flow": null,
       "grid_area": null,
       "grid_auto_columns": null,
       "grid_auto_flow": null,
       "grid_auto_rows": null,
       "grid_column": null,
       "grid_gap": null,
       "grid_row": null,
       "grid_template_areas": null,
       "grid_template_columns": null,
       "grid_template_rows": null,
       "height": null,
       "justify_content": null,
       "justify_items": null,
       "left": null,
       "margin": null,
       "max_height": null,
       "max_width": null,
       "min_height": null,
       "min_width": null,
       "object_fit": null,
       "object_position": null,
       "order": null,
       "overflow": null,
       "overflow_x": null,
       "overflow_y": null,
       "padding": null,
       "right": null,
       "top": null,
       "visibility": null,
       "width": null
      }
     },
     "b924aec05bd1482293f2e3d90c955c23": {
      "model_module": "trident-chemwidgets",
      "model_module_version": "^0.1.0",
      "model_name": "JsmeModel",
      "state": {
       "_dom_classes": [],
       "_model_module": "trident-chemwidgets",
       "_model_module_version": "^0.1.0",
       "_model_name": "JsmeModel",
       "_view_count": null,
       "_view_module": "trident-chemwidgets",
       "_view_module_version": "^0.1.0",
       "_view_name": "JsmeView",
       "base_smiles": "CC(C)Cc1ccc(cc1)[C@@H](C)C(=O)O",
       "layout": "IPY_MODEL_91b3e4d98ca642e69bdd692f1641f31c",
       "smiles": []
      }
     }
    },
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
