notebooks/GMSO_WIP_Features.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "curious-engagement",
   "metadata": {},
   "source": [
    "# Workflow for Visualization of GMSO Topology Objects\n",
    "21-03-30 <br>\n",
    "Cal Craven<br>\n",
    "<br>\n",
    "This workflow uses some additional libraries beyond the typical [MoSDeF](https://mosdef.org/) installations to provide an example for visualizing gmso topologies. The accessibility of the components of these objects allows for conversion to dicts that dash plotly uses for interactive visualizations. For more information on using interactive dash features, see this [link](https://dash.plotly.com/).  "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6b61308f",
   "metadata": {},
   "source": [
    "### Install instuctions to add to the conda environment\n",
    "```bash\n",
    "$ conda install jupyter-dash dash_cytoscape dash-table dash plotly \n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "laden-filling",
   "metadata": {},
   "outputs": [],
   "source": [
    "# imports\n",
    "import warnings \n",
    "warnings.filterwarnings('ignore')\n",
    "\n",
    "import unyt\n",
    "import numpy as np\n",
    "import networkx as nx\n",
    "import matplotlib.pyplot as plt\n",
    "import pandas as pd\n",
    "\n",
    "import dash\n",
    "from dash import dcc, html\n",
    "\n",
    "import plotly.express as px\n",
    "import dash_cytoscape as cyto\n",
    "import dash_table\n",
    "from dash.dependencies import Input, Output\n",
    "import json\n",
    "from jupyter_dash import JupyterDash\n",
    "\n",
    "import mbuild as mb\n",
    "import foyer \n",
    "import gmso\n",
    "from gmso.external import from_parmed\n",
    "from gmso.external.convert_networkx import to_networkx\n",
    "\n",
    "import pandas_conversion as pd_conv\n",
    "\n",
    "warnings.filterwarnings('ignore')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "damaged-sport",
   "metadata": {},
   "source": [
    "There are many ways to build a molecule using `mBuild`, for more information see the [mBuild documentation](https://mbuild.mosdef.org/en/stable/). This is a simple method of converting building a structure using a smile string."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "widespread-corps",
   "metadata": {},
   "outputs": [],
   "source": [
    "#Build an mBuild compound from smiles strings\n",
    "smiles = 'C1=CC=C(C=C1)C=CC=O'\n",
    "molecule = mb.load(smiles, smiles=True)\n",
    "molecule.visualize()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "beautiful-spiritual",
   "metadata": {},
   "source": [
    "Any method you can use to generate a `gmso.Topology` class object will work for the visualization. Please raise an [issue](https://github.com/mosdef-hub/gmso/issues) if a gmso topologies is not being visualized correctly. In this case, we will take the `mBuild` object `molecule` and convert it to a gmso.Topology object by converting to a parmed object through a `Foyer` xml object."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "front-factory",
   "metadata": {},
   "outputs": [],
   "source": [
    "#Atomtype using foyer and convert to gmso through parmed\n",
    "oplsaa = foyer.Forcefield(name='oplsaa')\n",
    "pmd_aa = oplsaa.apply(molecule, \n",
    "                      assert_bond_params = False,\n",
    "                      assert_angle_params = False,\n",
    "                      assert_dihedral_params = False)\n",
    "topology = from_parmed(pmd_aa)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "tracked-ancient",
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "#Dash Plotly representation of the molecule\n",
    "app = JupyterDash(__name__)\n",
    "\n",
    "#determines what color each node name is shown as\n",
    "color_dictionary = {'\"C\"':\"#8C92AC\",'\"O\"':\"red\",'\"H\"':\"#848482\",'\"N\"':\"blue\",'\"Cl\"':'green'}\n",
    "color_selection = []\n",
    "for key,value in color_dictionary.items():\n",
    "    color_selection.append({'selector': \"[element = \" +  str(key) + \"]\",\n",
    "                            'style': {'background-color': str(value),'shape': 'circle'}})\n",
    "\n",
    "#this gives a base layout of how the molecule will be shown initially.    \n",
    "graph = to_networkx(topology)\n",
    "layout = nx.drawing.layout.kamada_kawai_layout(graph)\n",
    "\n",
    "#elements is the dict that holds information about what to store in each node\n",
    "elements = []\n",
    "nodeids = {}\n",
    "for i,node in enumerate(graph.nodes):\n",
    "    elements.append({'data': {'id': str(i) + ': ' + node.name, \n",
    "                               'label': node.name + '(' + str(i) + ')',\n",
    "                              'element': node.name,\n",
    "                              'hash': node.__hash__(),\n",
    "                              'index' : i},\n",
    "                     'classes': '',\n",
    "                     'position': {'x': layout[node][0]*300,'y': layout[node][1]*300},\n",
    "                     'size': 200})\n",
    "    nodeids[node] = str(i) + ': ' + node.name\n",
    "\n",
    "for edge in graph.edges:\n",
    "    elements.append({'data': {'source': nodeids[edge[0]], 'target': nodeids[edge[1]]}, 'classes': 'red'})\n",
    "       \n",
    "app.layout = html.Div([\n",
    "    html.P(\"Molecular Visualization:\"),\n",
    "    #This is the format of the selectable dropdown tab\n",
    "    dcc.Dropdown(\n",
    "        id='parameter-dropdown',\n",
    "        options=[\n",
    "            {'label': 'Atom Types', 'value': 'atom_type'},\n",
    "            {'label': 'Bond Types', 'value': 'bond_type'},\n",
    "            {'label': 'Angle Types', 'value': 'angle_type'},\n",
    "            {'label': 'Dihedral Types', 'value': 'dihedral_type'}\n",
    "        ],\n",
    "        value='atom_type'),\n",
    "    html.Div([\n",
    "        #This is the format of the molecule visualization\n",
    "        cyto.Cytoscape(\n",
    "            id='cytoscape',\n",
    "            elements= elements,\n",
    "            style={'width': '500px', 'height': '500px'},\n",
    "            layout={'name':'preset'},\n",
    "            stylesheet=[\n",
    "            {\n",
    "                'selector': 'node',\n",
    "                'style': {\n",
    "                    'label': 'data(label)', 'width': \"50%\", 'height': \"50%\"\n",
    "                }\n",
    "            }\n",
    "        ] + color_selection \n",
    "        )],\n",
    "    style={'width': '50%', 'display': 'inline-block', 'margin-right': '20px',\n",
    "          'borderBottom': 'thin lightgrey solid',\n",
    "          'borderTop': 'thin lightgrey solid',\n",
    "          'backgroundColor': 'rgb(250, 250, 250)',\n",
    "          'vertical-align': 'top'}\n",
    "    ),    \n",
    "    html.Div([\n",
    "        #this is the format of the table showing the types of the gmso.Topology\n",
    "        dash_table.DataTable(\n",
    "            id='table-of-parameters',\n",
    "            style_as_list_view=True,\n",
    "            style_cell={\n",
    "                'whiteSpace': 'normal',\n",
    "                'height': 'auto',\n",
    "                'lineHeight': '15px'\n",
    "            },\n",
    "            style_table={'overflowX': 'auto','overflowY': 'auto',\n",
    "                        'height': '500px', 'width': '400px'},\n",
    "            style_data_conditional=[\n",
    "            {\n",
    "            'if': {'row_index': 'even'},\n",
    "            'backgroundColor': 'rgb(248, 248, 248)'\n",
    "            }],\n",
    "            style_header={\n",
    "            'backgroundColor': 'rgb(230, 230, 230)',\n",
    "            'fontWeight': 'bold'\n",
    "            }\n",
    "        )\n",
    "    ],\n",
    "    style={'width': '45%', 'display': 'inline-block', 'padding': '0 0'}\n",
    "    )\n",
    "])\n",
    "\n",
    "#Interactive components\n",
    "@app.callback(\n",
    "    Output('table-of-parameters', 'columns'),\n",
    "    Output('table-of-parameters', 'data'),\n",
    "    Input('parameter-dropdown','value'))\n",
    "def update_datatable(input_value):\n",
    "    if input_value == 'atom_type':\n",
    "        df = pd_conv.atomtypes_to_datatables(graph,labels=None,atom_objects = True)\n",
    "    elif input_value == 'bond_type':\n",
    "        df = pd_conv.bondtypes_to_datatables(graph,topology,labels=None,atom_objects = True)\n",
    "    elif input_value == 'angle_type':\n",
    "        df = pd_conv.angletypes_to_datatables(graph,topology,labels=None,atom_objects = True)\n",
    "    elif input_value == 'dihedral_type':\n",
    "        df = demo_utils.dihedraltypes_to_datatables(graph,topology,labels=None,atom_objects = True)\n",
    "    return([{\"name\": i, \"id\": i} for i in df.columns],\n",
    "          df.to_dict('records'))\n",
    "\n",
    "@app.callback(Output('table-of-parameters', 'style_data_conditional'),\n",
    "              Input('cytoscape', 'tapNodeData'))\n",
    "def displayTapNodeData(data):\n",
    "    try:\n",
    "        return ([{\n",
    "            'if': {'filter_query': '{atom_id} = ' + str(data['hash'])},\n",
    "            'backgroundColor': 'tomato',\n",
    "            'color': 'white'},\n",
    "            {'if': {'filter_query': '{atom1_id} = ' + str(data['hash']) +\n",
    "                                ' || {atom2_id} = ' + str(data['hash']),\n",
    "                   'column_id': ''},\n",
    "            'backgroundColor': 'tomato',\n",
    "            'color': 'white'},\n",
    "            {'if': {'filter_query': '{atom1_id} = ' + str(data['hash']) +\n",
    "                                ' || {atom2_id} = ' + str(data['hash']) + \n",
    "                                ' || {atom3_id} = ' + str(data['hash']) \n",
    "                   },\n",
    "            'backgroundColor': 'tomato',\n",
    "            'color': 'white'},\n",
    "            {'if': {'filter_query': '{atom1_id} = ' + str(data['hash']) +\n",
    "                                ' || {atom2_id} = ' + str(data['hash']) + \n",
    "                                ' || {atom3_id} = ' + str(data['hash']) +\n",
    "                                ' || {atom4_id} = ' + str(data['hash']) \n",
    "                   },\n",
    "            'backgroundColor': 'tomato',\n",
    "            'color': 'white'}\n",
    "\n",
    "        ])\n",
    "    except TypeError:\n",
    "        return\n",
    "\n",
    "#In order to run this at on a local port, replace the line below with mode = \"external\"\n",
    "app.run_server(mode = \"inline\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cardiovascular-parliament",
   "metadata": {},
   "source": [
    "You can select nodes on the plotly cytoscape map to allow them to be highlighted in the datatable to the right. One of the nicest features of a `gmso.Topology` object is that it is both picklable, and can be read out to a `Pandas Dataframe`. For more information on using these, see this [link](https://www.tutorialspoint.com/python_pandas/python_pandas_dataframe.htm). Additionally, you can rearrange the molecule to be able to orient it as you see fit by clicking and dragging each node."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "international-henry",
   "metadata": {},
   "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.8.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}