{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The React Jupyter Widget keeps your JavaScript and Python state in sync."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "eae90f5e16494ed69ffcb9ee79484ae9",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "TableWidget(columns=[{'header': 'Name', 'accessor': 'name'}, {'header': 'Type', 'accessor': 'type'}, {'header'…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import react_editable_table\n",
    "import ipywidgets as widgets\n",
    "\n",
    "columns = [\n",
    "    { 'header': \"Name\", 'accessor': \"name\" },\n",
    "    { 'header': \"Type\", 'accessor': \"type\" },\n",
    "    { 'header': \"Description\", 'accessor': \"description\", \"editable\": True },\n",
    "]\n",
    "\n",
    "data = [\n",
    "    { 'name': \"id\", \"type\": \"varchar\", \"description\": \"this is id field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "    { 'name': \"name\", \"type\": \"varchar\", \"description\": \"this is name field\" },\n",
    "]\n",
    "\n",
    "meta = {'table': \"table_a\"}\n",
    "\n",
    "w = react_editable_table.TableWidget(columns=columns, data=data, meta=meta)\n",
    "display(w)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "69655fbbf85d44f990c9236174e69c1d",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Output()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "output = widgets.Output()\n",
    "display(output)\n",
    "\n",
    "def on_cell_change(a):\n",
    "    with output:\n",
    "        print(a)\n",
    "\n",
    "w.on_cell_change(on_cell_change)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "fb38696def62475fb4645b52720ac699",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "SQLDataViewerWidget(sql='SELECT\\n    e.employee_name, m.employee_name AS manager_name,\\n    e.department_id,\\n…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import react_editable_table\n",
    "import ipywidgets as widgets\n",
    "\n",
    "table = {\"columns\": columns, \"data\": data }\n",
    "\n",
    "sql = \"\"\"SELECT\n",
    "    e.employee_name, m.employee_name AS manager_name,\n",
    "    e.department_id,\n",
    "    d.department_name,\n",
    "    e.salary\n",
    "  FROM employees e INNER JOIN managers m ON e.manager_id = m.manager_id INNER JOIN departments d\n",
    "  ON e.department_id = d.department_id\n",
    "  WHERE e.salary > 100000\n",
    "  ORDER BY e.salary DESC;\"\"\"\n",
    "\n",
    "stats = [\n",
    "  {\n",
    "    \"name\": \"Manufacturer\",  \n",
    "    \"overall\": {\n",
    "      \"type\": \"textual\",\n",
    "      \"count\": 495,  \n",
    "      \"distinct\": 2,\n",
    "      \"missing\": 0,\n",
    "    },\n",
    "    \"distribution\": {\n",
    "      \"enum\": [\n",
    "        {\n",
    "          \"name\": \"AMD Radeon\",\n",
    "          \"count\": 250,  \n",
    "        },\n",
    "        {\n",
    "          \"name\": \"Nvidia\",  \n",
    "          \"count\": 245,\n",
    "        },\n",
    "      ],\n",
    "    }\n",
    "  },  \n",
    "  {\n",
    "    \"name\": \"Class\",    \n",
    "    \"overall\": {\n",
    "      \"type\": \"textual\",        \n",
    "      \"count\": 495,\n",
    "      \"distinct\": 3,      \n",
    "      \"missing\": 0,\n",
    "    },\n",
    "    \"distribution\": {\n",
    "      \"enum\": [             \n",
    "        {\n",
    "           \"name\": \"Desktop\",\n",
    "           \"count\": 250,           \n",
    "        },   \n",
    "        {\n",
    "          \"name\": \"Workstation\",\n",
    "          \"count\": 113,\n",
    "        },\n",
    "        {\n",
    "           \"name\": \"Datacenter\",\n",
    "           \"count\": 83,\n",
    "        },         \n",
    "      ],\n",
    "    }    \n",
    "  }, \n",
    "  {\n",
    "    \"name\": \"Name\",\n",
    "    \"overall\": {\n",
    "      \"type\": \"textual\",  \n",
    "      \"count\": 495,\n",
    "      \"distinct\": 492,\n",
    "      \"missing\": 0,      \n",
    "    },\n",
    "    \"distribution\": {\n",
    "      \"unique\": 492,\n",
    "    }   \n",
    "  },\n",
    "  {\n",
    "    \"name\": \"Year\",   \n",
    "    \"overall\": {\n",
    "      \"type\": \"numerical\",\n",
    "      \"count\": 495,\n",
    "      \"distinct\": 14,\n",
    "      \"missing\": 0,        \n",
    "    },\n",
    "    \"distribution\": {\n",
    "      \"numerical\": [                \n",
    "        [\"Zeros\", \"0 (0.000%)\"],\n",
    "        [\"Min\", \"2007.000\"],  \n",
    "        [\"Max\", \"2020.000\"],          \n",
    "        [\"Mean\", \"2012.881\"],\n",
    "        [\"5th pctl\", \"2007.000\"],\n",
    "        [\"25th pctl\", \"2010.000\"],        \n",
    "        [\"50th pctl\", \"2013.000\"],\n",
    "        [\"75th pctl\", \"2016.000\"],\n",
    "        [\"95th pctl\", \"2019.000\"],       \n",
    "        [\"IQR\", \"6.000\"],          \n",
    "        [\"Outlier\", \"0 (0.000%)\"]            \n",
    "      ],      \n",
    "    }        \n",
    "  },\n",
    "  {\n",
    "    \"name\": \"Fab\",\n",
    "    \"overall\": {\n",
    "      \"type\": \"numerical\",\n",
    "      \"count\": 495,\n",
    "      \"distinct\": 14,\n",
    "      \"missing\": 0,        \n",
    "    },\n",
    "    \"distribution\": {\n",
    "      \"numerical\": [                \n",
    "        [\"Zeros\", \"0 (0.000%)\"],\n",
    "        [\"Min\", \"2007.000\"],  \n",
    "        [\"Max\", \"2020.000\"],          \n",
    "        [\"Mean\", \"2012.881\"],\n",
    "        [\"5th pctl\", \"2007.000\"],\n",
    "        [\"25th pctl\", \"2010.000\"],        \n",
    "        [\"50th pctl\", \"2013.000\"],\n",
    "        [\"75th pctl\", \"2016.000\"],\n",
    "        [\"95th pctl\", \"2019.000\"],       \n",
    "        [\"IQR\", \"6.000\"],          \n",
    "        [\"Outlier\", \"0 (0.000%)\"]            \n",
    "      ],      \n",
    "    }\n",
    "  },\n",
    "  {\n",
    "    \"name\": \"Transition\",\n",
    "    \"overall\": {\n",
    "      \"type\": \"numerical\",\n",
    "      \"count\": 495,\n",
    "      \"distinct\": 14,\n",
    "      \"missing\": 0,        \n",
    "    },\n",
    "    \"distribution\": {\n",
    "      \"numerical\": [                \n",
    "        [\"Zeros\", \"0 (0.000%)\"],\n",
    "        [\"Min\", \"2007.000\"],  \n",
    "        [\"Max\", \"2020.000\"],          \n",
    "        [\"Mean\", \"2012.881\"],\n",
    "        [\"5th pctl\", \"2007.000\"],\n",
    "        [\"25th pctl\", \"2010.000\"],        \n",
    "        [\"50th pctl\", \"2013.000\"],\n",
    "        [\"75th pctl\", \"2016.000\"],\n",
    "        [\"95th pctl\", \"2019.000\"],       \n",
    "        [\"IQR\", \"6.000\"],          \n",
    "        [\"Outlier\", \"0 (0.000%)\"]            \n",
    "      ],      \n",
    "    }\n",
    "  },\n",
    "]\n",
    "\n",
    "w = react_editable_table.SQLDataViewerWidget(table, sql)\n",
    "display(w)"
   ]
  }
 ],
 "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": 4
}