nglview-visualization-student.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "e82d2f49",
   "metadata": {},
   "source": [
    "# Protein Visualization\n",
    "\n",
    "You can use Python and the Jupyter notebook to interactively visualize pdb files.\n",
    "\n",
    "Questions:\n",
    "- How can I use Python and the Jupyter notebook to visualize protein files?\n",
    "\n",
    "Objectives\n",
    "- Use the Python library `nglview` to visualize pdb files. \n",
    "- Learn about different molecular representations.\n",
    "- Learn how to change molecule representation and display color.\n",
    "- Learn how to select different parts of the protein structure file.\n",
    "- Learn to save images.\n",
    "\n",
    "## NGLView\n",
    "In this notebook, we will use the Python library `nglview` to visualize data from pdb files. To use `nglview`, we first have to import it. We usually will shorten `nglview` to `nv`. We will also import `os` to build our file path for our pdb file."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "cab4b6ae",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "4f0a9071",
   "metadata": {},
   "source": [
    "To visualize data from a file, we will use the `show_file` function. You put the file path of the pdb you want to view in this function. We will set this equal to a variable called `view`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "55910a0a",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "9a82c0e7",
   "metadata": {},
   "source": [
    "To actually see our pdb representation, we just type the variable `view` as the last thing in a notebook cell."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ebcce30e",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "df0ffc99",
   "metadata": {},
   "source": [
    "You can hover over different atoms and residues to see information about them. You can also scroll in or out and click and drag to move the molecule in the viewer. You can even drag the lower right hand corner to make the visualization window larger.\n",
    "\n",
    "## Changing Representations\n",
    "\n",
    "You will notice that `nglview` is representing the ligand and the protein in different ways. By default, `nglview` shows the protein in something called `cartoon` representation and the ligand in `ball+stick` representation. \n",
    "\n",
    "You can change or add representations to the molecule. For example, if we wanted to change our representation to all be `ball+stick`, we would first clear the default representation using the `clear_representations` function, then add a `ball+stick` representation."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "01ef2471",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "165d5062",
   "metadata": {},
   "source": [
    "Some available representations are:\n",
    "- `cartoon` - draws protein backbone structure (alpha helices and beta sheets) and nucleic acid backbone structure.\n",
    "- `base` - shows nucleic acid bases. Usually used with `cartoon` representation.\n",
    "- `ball+stick`- draws atoms as spheres connected by sticks (cylinders) for bonds.\n",
    "- `licorice` - similar to ball+stick, but does not have spheres on atoms.\n",
    "- `spacefill` - atoms are drawn as large spheres. No bonds are drawn between atoms.\n",
    "- `hyperball` - a derivative of `ball+stick` in which atoms are smoothly connected.\n",
    "\n",
    "You can see a full list on the [NGLViewer documentation](https://nglviewer.org/ngl/api/manual/molecular-representations.html).\n",
    "\n",
    "### Exercise\n",
    "Create a view using a representation of your choice."
   ]
  },
  {
   "cell_type": "raw",
   "id": "3053b317",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "74750dbe",
   "metadata": {},
   "source": [
    "## Selecting Parts of the Molecule\n",
    "\n",
    "NGLView allows you to select different parts of your molecule and add representations to those parts only. For example, we can select to add a representation to only the ligands by add `'ligand'` after our representation keyword in the `add_representation` function.\n",
    "\n",
    "There are a lot of keywords you can use (a complete list is at the end of this notebook)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fe2b9e89",
   "metadata": {},
   "outputs": [],
   "source": [
    "view = nv.show_file(filepath)\n",
    "view.clear_representations()\n",
    "# Add code here to show ligand\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b1f119ee",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "view"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ab3abbdc",
   "metadata": {},
   "source": [
    "You can also specify the color and the opacity of the representation and center the view on a selection."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "952c2910",
   "metadata": {},
   "outputs": [],
   "source": [
    "view = nv.show_file(filepath)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "39afb3e7",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "f6632e97",
   "metadata": {},
   "source": [
    "### Check your understanding\n",
    "\n",
    "Add another representation to our view - select the protein make it the color blue using cartoon representation with 0.5 opacity."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "de0731bd",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "00eb623c",
   "metadata": {},
   "source": [
    "## Adding Representations of Contacts"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "52d41dae",
   "metadata": {},
   "source": [
    "We can also add a representation of all the atom contacts in the molecule. You can hover over the contacts to get more information about each. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6978aeb1",
   "metadata": {},
   "outputs": [],
   "source": [
    "view = nv.show_file(filepath)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d4f1b4d5",
   "metadata": {},
   "source": [
    "## Saving Images\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "47533bc4",
   "metadata": {},
   "source": [
    "Once you have your representation looking the way you like, you can save an image to your computer for use in a presenation. To embed a static image in the Jupyter notebook, use the `render_image` function. To download the image, use the `download_image` function. An image will be put in your downloads folder."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c182d7c1",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b3b69ac3",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "51c17d51",
   "metadata": {},
   "source": [
    "You can change the filename (default is `screenshot.png`) by adding the argument `filename`. You can increase the image quality by adding an argument called `factor`. The default value for this is `4` and setting a higher number will result in an larger image. You can make the white parts of your image transparent with the keyword `transparent=False`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9c008936",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "a927e9d2",
   "metadata": {},
   "source": [
    "## Hands On Exercise"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ff08f216",
   "metadata": {},
   "source": [
    "There are a large number of keywords you can use for selecting parts of your pdb file:\n",
    "- all, *\n",
    "- sidechain\n",
    "- sidechainAttached (not backbone or .CA or (PRO and .N))\n",
    "- backbone\n",
    "- protein\n",
    "- nucleic\n",
    "- rna\n",
    "- dna\n",
    "- hetero\n",
    "- ligand (( not polymer or hetero ) and not ( water or ion ))\n",
    "- ion\n",
    "- saccharide/sugar\n",
    "- polymer\n",
    "- water\n",
    "- hydrogen\n",
    "- helix\n",
    "- sheet\n",
    "- turn (not helix and not sheet)\n",
    "- small (Gly or Ala or Ser)\n",
    "- nucleophilic (Ser or Thr or Cys)\n",
    "- hydrophobic (Ala or Val or Leu or Ile or Met or Pro or Phe or Trp)\n",
    "- aromatic (Phe or Tyr or Trp or His)\n",
    "- amid (Asn or Gln)\n",
    "- acidic (Asp or Glu)\n",
    "- basic (His or Lys or Arg)\n",
    "- charged (Asp or Glu or His or Lys or Arg)\n",
    "- polar (Asp or Cys or Gly or Glu or His or Lys or Arg or Asn or Gln or Ser or Thr or Tyr)\n",
    "- nonpolar (Ala or Ile or Leu or Met or Phe or Pro or Val or Trp)\n",
    "- cyclic (His or Phe or Pro or Trp or Tyr)\n",
    "- aliphatic (Ala or Gly or Ile or Leu or Val)\n",
    "- bonded (all atoms with at least one bond)\n",
    "- ring (all atoms within rings)\n",
    "\n",
    "Try visualizing some other proteins from your pdb file. See if you can figure out how to\n",
    "1. Color your protein by secondary structure.\n",
    "2. Change the representation of water molecules.\n",
    "3. Change the representation of atoms in rings."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "00e3ded6",
   "metadata": {},
   "outputs": [],
   "source": [
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "028ef15b",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8fb5d6bd",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ce042199",
   "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.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}