{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "8c91012d-3445-4052-ab2f-129ca785a666",
   "metadata": {},
   "source": [
    "Panel is installed by default in the Pyodide distribution that JupyterLite is built on. Though, not all dependencies are therefore we must install it manually:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8246f642-6252-4f4b-8640-638f006e7bb5",
   "metadata": {},
   "outputs": [],
   "source": [
    "import piplite\n",
    "await piplite.install(['altair'])"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1a1bd41d-3dea-4e38-80df-2d9ed777233d",
   "metadata": {},
   "source": [
    "Once installed we can activate the `pn.extension` as normal."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "21b99a75-fff5-466d-a892-a271eff7a71f",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension('vega')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2642fd7c-1e03-49f7-8ab1-6718dd80c714",
   "metadata": {},
   "source": [
    "Panel components will now work just like in a regular notebook environment."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9c802930-d96b-4c03-be8b-6123656fa3c4",
   "metadata": {},
   "outputs": [],
   "source": [
    "w = pn.widgets.FloatSlider(start=0, end=3.14)\n",
    "\n",
    "pn.Row(w, pn.bind(pn.pane.Str, w))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e438c397-6479-4fbc-a85c-d2350efa95a3",
   "metadata": {},
   "source": [
    "Even complex examples relying on custom extensions (e.g. `'vega'`) will work:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b7a8c1bf-c876-4074-af90-1b3a0862ba14",
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "import pandas as pd\n",
    "\n",
    "df = pd.read_json(\"https://raw.githubusercontent.com/vega/vega/master/docs/data/penguins.json\")\n",
    "\n",
    "brush = alt.selection_interval(name='brush')  # selection of type \"interval\"\n",
    "\n",
    "chart = alt.Chart(df).mark_point().encode(\n",
    "    x=alt.X('Beak Length (mm):Q', scale=alt.Scale(zero=False)),\n",
    "    y=alt.Y('Beak Depth (mm):Q', scale=alt.Scale(zero=False)),\n",
    "    color=alt.condition(brush, 'Species:N', alt.value('lightgray'))\n",
    ").properties(\n",
    "    width=250,\n",
    "    height=250\n",
    ").add_params(\n",
    "    brush\n",
    ")\n",
    "\n",
    "vega_pane = pn.pane.Vega(chart, debounce=10)\n",
    "\n",
    "def filtered_table(selection):\n",
    "    if selection is None:\n",
    "        return '## No selection'\n",
    "    query = ' & '.join(\n",
    "        f'{crange[0]:.3f} <= `{col}` <= {crange[1]:.3f}'\n",
    "        for col, crange in selection.items()\n",
    "    )\n",
    "    return pn.pane.DataFrame(df.query(query), width=600)\n",
    "\n",
    "pn.Column(\n",
    "    'Select points on the plot and watch the linked table update.',\n",
    "    sizing_mode='stretch_width'\n",
    ").servable()\n",
    "\n",
    "pn.Row(\n",
    "    vega_pane,\n",
    "    pn.Column(\n",
    "        pn.bind(filtered_table, vega_pane.selection.param.brush),\n",
    "        scroll=True, width=650, height=300\n",
    "    )\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f4efdeef-e3c5-4cb0-b358-b40f03c59f93",
   "metadata": {},
   "source": [
    "The contents of Panelite are updated on every release, however Jupyterlite caches old edits to files. If you want to reset the storage and **delete all modifications you made to the contents** then use the [Reset_Jupyterlite.ipynb](Reset_Jupyterlite.ipynb) notebook."
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}