{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "7260ca30-7450-4c41-b7f3-0b20be6b9a8b",
   "metadata": {},
   "source": [
    "# Using the Histogram widget"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "426e1291-d1b9-4b5b-8b83-57b100009b7a",
   "metadata": {},
   "source": [
    "We first import the `trident_chemwidgets` and the `pandas` lib to load our csv dataset."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "515686f3-e649-40f5-bc6d-59a022213e73",
   "metadata": {},
   "outputs": [],
   "source": [
    "import trident_chemwidgets as tcw\n",
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d6e0b578-778a-4f64-bb0a-49f83ed9ee61",
   "metadata": {},
   "outputs": [],
   "source": [
    "# First we import our dataset with pandas\n",
    "dataset = pd.read_csv('https://raw.githubusercontent.com/tridentbio/trident-chemwidgets/master/examples/zinc_subset.csv')\n",
    "dataset.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1bac1c45-4bee-4ecd-a126-b474406429ed",
   "metadata": {},
   "source": [
    "Once we have our data, we can use the Histogram widget to display an interactive Histogram that we can use to explore and split or subset our data set. The Histogram widget accepts the following keyword arugements:\n",
    "\n",
    "- `data`: the dataset in pandas data frame format\n",
    "- `smiles`: the name of the column containing the molecular structure in SMILES format\n",
    "- `x`: the name of the column to plot along the x-axis\n",
    "- `x_label`: (optional) the x-axis label to display, defaults to the string specified by `x` if a label is not provided  "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a2dc2e09-9b63-4366-9032-5c34c2da7ec4",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Now we can plot\n",
    "histogram = tcw.Histogram(data=dataset, smiles='smiles', x='tpsa', x_label='TPSA')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6c65a479",
   "metadata": {},
   "source": [
    "<div align='center'>\n",
    "<img src='https://raw.githubusercontent.com/tridentbio/trident-chemwidgets/master/examples/gifs/histogram_demo_small.gif'/>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5fa1f1aa-f370-4b5a-8b9f-12caf56662dc",
   "metadata": {},
   "source": [
    "In the example above, you can click and drag anywhere in the plot body along the x-axis to select a subset of the data. Your selected datapoints will be highlighted on the plot in a turquoise color. If you click the `SHOW STRUCTURES` button after you have selected the data points, a gallery of the molecular structures will be displayed to the right of the plot. If you then click `SAVE SELECTION`, the selected datapoints will be saved to an internal variable called `selection` that can be accessed as below. You do not need to click `SHOW STRUCTURES` before clicking `SAVE SELECTION`, though the gallery of selected structures will be displayed once `SAVE SELECTION` is clicked."
   ]
  }
 ],
 "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.10.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
