Add data input and preview widgets

app.ipynb

@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 359,
+   "execution_count": 443,
    "metadata": {},
    "outputs": [
     {
@@ -98,7 +98,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 360,
+   "execution_count": 444,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -114,7 +114,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 361,
+   "execution_count": 445,
    "metadata": {},
    "outputs": [
     {
@@ -161,12 +161,12 @@
      "data": {
       "application/vnd.holoviews_exec.v0+json": "",
       "text/html": [
-       "<div id='f6e0afbe-db3f-42a1-9a96-1a6d474e533f'>\n",
-       "  <div id=\"fc8a7ced-d5a4-4379-8b9c-44ac5d3f9efe\" data-root-id=\"f6e0afbe-db3f-42a1-9a96-1a6d474e533f\" style=\"display: contents;\"></div>\n",
+       "<div id='b5fd0d4c-3636-402e-8326-0f10242d08f9'>\n",
+       "  <div id=\"c722f4ad-7a66-43bd-aa27-4bbc623a5c3b\" data-root-id=\"b5fd0d4c-3636-402e-8326-0f10242d08f9\" style=\"display: contents;\"></div>\n",
        "</div>\n",
        "<script type=\"application/javascript\">(function(root) {\n",
-       "  var docs_json = {\"f7ef0973-ff1e-494a-9792-d8c42d533bee\":{\"version\":\"3.3.4\",\"title\":\"Bokeh Application\",\"roots\":[{\"type\":\"object\",\"name\":\"panel.models.browser.BrowserInfo\",\"id\":\"f6e0afbe-db3f-42a1-9a96-1a6d474e533f\"},{\"type\":\"object\",\"name\":\"panel.models.comm_manager.CommManager\",\"id\":\"c0c50dc7-bbaa-425f-9688-677ad7e55f02\",\"attributes\":{\"plot_id\":\"f6e0afbe-db3f-42a1-9a96-1a6d474e533f\",\"comm_id\":\"0ff75a2de10a4bc7ad3207eb722061e5\",\"client_comm_id\":\"2a5dea66a40342718ab69f4141452d11\"}}],\"defs\":[{\"type\":\"model\",\"name\":\"ReactiveHTML1\"},{\"type\":\"model\",\"name\":\"FlexBox1\",\"properties\":[{\"name\":\"align_content\",\"kind\":\"Any\",\"default\":\"flex-start\"},{\"name\":\"align_items\",\"kind\":\"Any\",\"default\":\"flex-start\"},{\"name\":\"flex_direction\",\"kind\":\"Any\",\"default\":\"row\"},{\"name\":\"flex_wrap\",\"kind\":\"Any\",\"default\":\"wrap\"},{\"name\":\"justify_content\",\"kind\":\"Any\",\"default\":\"flex-start\"}]},{\"type\":\"model\",\"name\":\"FloatPanel1\",\"properties\":[{\"name\":\"config\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"contained\",\"kind\":\"Any\",\"default\":true},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"right-top\"},{\"name\":\"offsetx\",\"kind\":\"Any\",\"default\":null},{\"name\":\"offsety\",\"kind\":\"Any\",\"default\":null},{\"name\":\"theme\",\"kind\":\"Any\",\"default\":\"primary\"},{\"name\":\"status\",\"kind\":\"Any\",\"default\":\"normalized\"}]},{\"type\":\"model\",\"name\":\"GridStack1\",\"properties\":[{\"name\":\"mode\",\"kind\":\"Any\",\"default\":\"warn\"},{\"name\":\"ncols\",\"kind\":\"Any\",\"default\":null},{\"name\":\"nrows\",\"kind\":\"Any\",\"default\":null},{\"name\":\"allow_resize\",\"kind\":\"Any\",\"default\":true},{\"name\":\"allow_drag\",\"kind\":\"Any\",\"default\":true},{\"name\":\"state\",\"kind\":\"Any\",\"default\":[]}]},{\"type\":\"model\",\"name\":\"drag1\",\"properties\":[{\"name\":\"slider_width\",\"kind\":\"Any\",\"default\":5},{\"name\":\"slider_color\",\"kind\":\"Any\",\"default\":\"black\"},{\"name\":\"value\",\"kind\":\"Any\",\"default\":50}]},{\"type\":\"model\",\"name\":\"click1\",\"properties\":[{\"name\":\"terminal_output\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"debug_name\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"clears\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"copy_to_clipboard1\",\"properties\":[{\"name\":\"fill\",\"kind\":\"Any\",\"default\":\"none\"},{\"name\":\"value\",\"kind\":\"Any\",\"default\":null}]},{\"type\":\"model\",\"name\":\"FastWrapper1\",\"properties\":[{\"name\":\"object\",\"kind\":\"Any\",\"default\":null},{\"name\":\"style\",\"kind\":\"Any\",\"default\":null}]},{\"type\":\"model\",\"name\":\"NotificationAreaBase1\",\"properties\":[{\"name\":\"js_events\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"bottom-right\"},{\"name\":\"_clear\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"NotificationArea1\",\"properties\":[{\"name\":\"js_events\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"notifications\",\"kind\":\"Any\",\"default\":[]},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"bottom-right\"},{\"name\":\"_clear\",\"kind\":\"Any\",\"default\":0},{\"name\":\"types\",\"kind\":\"Any\",\"default\":[{\"type\":\"map\",\"entries\":[[\"type\",\"warning\"],[\"background\",\"#ffc107\"],[\"icon\",{\"type\":\"map\",\"entries\":[[\"className\",\"fas fa-exclamation-triangle\"],[\"tagName\",\"i\"],[\"color\",\"white\"]]}]]},{\"type\":\"map\",\"entries\":[[\"type\",\"info\"],[\"background\",\"#007bff\"],[\"icon\",{\"type\":\"map\",\"entries\":[[\"className\",\"fas fa-info-circle\"],[\"tagName\",\"i\"],[\"color\",\"white\"]]}]]}]}]},{\"type\":\"model\",\"name\":\"Notification\",\"properties\":[{\"name\":\"background\",\"kind\":\"Any\",\"default\":null},{\"name\":\"duration\",\"kind\":\"Any\",\"default\":3000},{\"name\":\"icon\",\"kind\":\"Any\",\"default\":null},{\"name\":\"message\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"notification_type\",\"kind\":\"Any\",\"default\":null},{\"name\":\"_destroyed\",\"kind\":\"Any\",\"default\":false}]},{\"type\":\"model\",\"name\":\"TemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"BootstrapTemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"MaterialTemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]}]}};\n",
-       "  var render_items = [{\"docid\":\"f7ef0973-ff1e-494a-9792-d8c42d533bee\",\"roots\":{\"f6e0afbe-db3f-42a1-9a96-1a6d474e533f\":\"fc8a7ced-d5a4-4379-8b9c-44ac5d3f9efe\"},\"root_ids\":[\"f6e0afbe-db3f-42a1-9a96-1a6d474e533f\"]}];\n",
+       "  var docs_json = {\"e30ff602-1ba7-4be0-bedb-9dd6b6301b42\":{\"version\":\"3.3.4\",\"title\":\"Bokeh Application\",\"roots\":[{\"type\":\"object\",\"name\":\"panel.models.browser.BrowserInfo\",\"id\":\"b5fd0d4c-3636-402e-8326-0f10242d08f9\"},{\"type\":\"object\",\"name\":\"panel.models.comm_manager.CommManager\",\"id\":\"bdb2d655-80ca-4e44-8b26-cf407eb5094a\",\"attributes\":{\"plot_id\":\"b5fd0d4c-3636-402e-8326-0f10242d08f9\",\"comm_id\":\"f44bac24631040bbbad6afae06c136a1\",\"client_comm_id\":\"8409efc1cf814db885afe27289332e40\"}}],\"defs\":[{\"type\":\"model\",\"name\":\"ReactiveHTML1\"},{\"type\":\"model\",\"name\":\"FlexBox1\",\"properties\":[{\"name\":\"align_content\",\"kind\":\"Any\",\"default\":\"flex-start\"},{\"name\":\"align_items\",\"kind\":\"Any\",\"default\":\"flex-start\"},{\"name\":\"flex_direction\",\"kind\":\"Any\",\"default\":\"row\"},{\"name\":\"flex_wrap\",\"kind\":\"Any\",\"default\":\"wrap\"},{\"name\":\"justify_content\",\"kind\":\"Any\",\"default\":\"flex-start\"}]},{\"type\":\"model\",\"name\":\"FloatPanel1\",\"properties\":[{\"name\":\"config\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"contained\",\"kind\":\"Any\",\"default\":true},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"right-top\"},{\"name\":\"offsetx\",\"kind\":\"Any\",\"default\":null},{\"name\":\"offsety\",\"kind\":\"Any\",\"default\":null},{\"name\":\"theme\",\"kind\":\"Any\",\"default\":\"primary\"},{\"name\":\"status\",\"kind\":\"Any\",\"default\":\"normalized\"}]},{\"type\":\"model\",\"name\":\"GridStack1\",\"properties\":[{\"name\":\"mode\",\"kind\":\"Any\",\"default\":\"warn\"},{\"name\":\"ncols\",\"kind\":\"Any\",\"default\":null},{\"name\":\"nrows\",\"kind\":\"Any\",\"default\":null},{\"name\":\"allow_resize\",\"kind\":\"Any\",\"default\":true},{\"name\":\"allow_drag\",\"kind\":\"Any\",\"default\":true},{\"name\":\"state\",\"kind\":\"Any\",\"default\":[]}]},{\"type\":\"model\",\"name\":\"drag1\",\"properties\":[{\"name\":\"slider_width\",\"kind\":\"Any\",\"default\":5},{\"name\":\"slider_color\",\"kind\":\"Any\",\"default\":\"black\"},{\"name\":\"value\",\"kind\":\"Any\",\"default\":50}]},{\"type\":\"model\",\"name\":\"click1\",\"properties\":[{\"name\":\"terminal_output\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"debug_name\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"clears\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"copy_to_clipboard1\",\"properties\":[{\"name\":\"fill\",\"kind\":\"Any\",\"default\":\"none\"},{\"name\":\"value\",\"kind\":\"Any\",\"default\":null}]},{\"type\":\"model\",\"name\":\"FastWrapper1\",\"properties\":[{\"name\":\"object\",\"kind\":\"Any\",\"default\":null},{\"name\":\"style\",\"kind\":\"Any\",\"default\":null}]},{\"type\":\"model\",\"name\":\"NotificationAreaBase1\",\"properties\":[{\"name\":\"js_events\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"bottom-right\"},{\"name\":\"_clear\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"NotificationArea1\",\"properties\":[{\"name\":\"js_events\",\"kind\":\"Any\",\"default\":{\"type\":\"map\"}},{\"name\":\"notifications\",\"kind\":\"Any\",\"default\":[]},{\"name\":\"position\",\"kind\":\"Any\",\"default\":\"bottom-right\"},{\"name\":\"_clear\",\"kind\":\"Any\",\"default\":0},{\"name\":\"types\",\"kind\":\"Any\",\"default\":[{\"type\":\"map\",\"entries\":[[\"type\",\"warning\"],[\"background\",\"#ffc107\"],[\"icon\",{\"type\":\"map\",\"entries\":[[\"className\",\"fas fa-exclamation-triangle\"],[\"tagName\",\"i\"],[\"color\",\"white\"]]}]]},{\"type\":\"map\",\"entries\":[[\"type\",\"info\"],[\"background\",\"#007bff\"],[\"icon\",{\"type\":\"map\",\"entries\":[[\"className\",\"fas fa-info-circle\"],[\"tagName\",\"i\"],[\"color\",\"white\"]]}]]}]}]},{\"type\":\"model\",\"name\":\"Notification\",\"properties\":[{\"name\":\"background\",\"kind\":\"Any\",\"default\":null},{\"name\":\"duration\",\"kind\":\"Any\",\"default\":3000},{\"name\":\"icon\",\"kind\":\"Any\",\"default\":null},{\"name\":\"message\",\"kind\":\"Any\",\"default\":\"\"},{\"name\":\"notification_type\",\"kind\":\"Any\",\"default\":null},{\"name\":\"_destroyed\",\"kind\":\"Any\",\"default\":false}]},{\"type\":\"model\",\"name\":\"TemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"BootstrapTemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]},{\"type\":\"model\",\"name\":\"MaterialTemplateActions1\",\"properties\":[{\"name\":\"open_modal\",\"kind\":\"Any\",\"default\":0},{\"name\":\"close_modal\",\"kind\":\"Any\",\"default\":0}]}]}};\n",
+       "  var render_items = [{\"docid\":\"e30ff602-1ba7-4be0-bedb-9dd6b6301b42\",\"roots\":{\"b5fd0d4c-3636-402e-8326-0f10242d08f9\":\"c722f4ad-7a66-43bd-aa27-4bbc623a5c3b\"},\"root_ids\":[\"b5fd0d4c-3636-402e-8326-0f10242d08f9\"]}];\n",
        "  var docs = Object.values(docs_json)\n",
        "  if (!docs) {\n",
        "    return\n",
@@ -230,7 +230,7 @@
      },
      "metadata": {
       "application/vnd.holoviews_exec.v0+json": {
-       "id": "f6e0afbe-db3f-42a1-9a96-1a6d474e533f"
+       "id": "b5fd0d4c-3636-402e-8326-0f10242d08f9"
       }
      },
      "output_type": "display_data"
@@ -240,30 +240,45 @@
     "# | export\n",
     "pn.extension(\n",
     "    template=\"fast\",\n",
-    ")\n"
+    ")\n",
+    "pn.Column(\n",
+    "    pn.pane.Markdown(\n",
+    "        \"\"\"\n",
+    "        # Welcome to the Interactive Data App\n",
+    "\n",
+    "        This app allows you to interact with the data in a number of ways.\n",
+    "        \"\"\"\n",
+    "    )\n",
+    ").servable(target=\"sidebar\");"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 362,
+   "execution_count": 446,
    "metadata": {},
    "outputs": [],
    "source": [
     "# | export\n",
-    "switch = pn.widgets.Switch(name=\"URL - FILE\", value=False)\n",
-    "# pn.Row(switch).servable(target=\"sidebar\");\n",
+    "pn.Column(\n",
+    "    pn.pane.Markdown(\n",
+    "        \"\"\"\n",
+    "        ## Data Input\n",
+    "\n",
+    "        You can either input the URL of a dataset or upload a file.\n",
+    "        \"\"\"\n",
+    "    ),\n",
+    ").servable(target=\"sidebar\");\n",
     "\n",
+    "switch = pn.widgets.Switch(name=\"URL - FILE\", value=False)\n",
     "url = pn.widgets.TextAreaInput(name=\"url\", placeholder=\"Enter the url of the dataset\", value=\"https://raw.githubusercontent.com/holoviz/panel/main/examples/assets/occupancy.csv\");\n",
     "file = pn.widgets.FileInput(\n",
     "    accept=\".csv\", name=\"Upload a CSV file\",\n",
-    ")\n",
-    "\n",
-    "\n"
+    ")\n"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 363,
+   "execution_count": 447,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -277,24 +292,38 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 364,
+   "execution_count": 448,
    "metadata": {},
    "outputs": [],
    "source": [
     "# | export\n",
     "\n",
     "def get_data(switch: pn.widgets.Switch, url: pn.widgets.TextAreaInput, file: pn.widgets.FileInput):\n",
+    "    df = None\n",
     "    if not switch:\n",
     "        df = pd.read_csv(url)\n",
-    "        cols = df.columns\n",
-    "        return pn.Row(df.head(), df.hvplot(x=cols[0], y=cols[1:]).opts(width=600, height=400))\n",
     "    else:\n",
     "        if file is None:\n",
     "            return \"No file selected\"\n",
     "        df = pd.read_csv(io.BytesIO(file))\n",
-    "        cols = df.columns\n",
-    "        return pn.Column(df.head(), df.hvplot(x=cols[0], y=cols[1:]).opts(width=600, height=400)\n",
-    "        )\n",
+    "        \n",
+    "    widget = pn.Column(\n",
+    "        pn.pane.Markdown(\n",
+    "            \"\"\"\n",
+    "            ## Data Preview\n",
+    "\n",
+    "            Here is a preview of the data.\n",
+    "            \"\"\"\n",
+    "        ),\n",
+    "        pn.pane.Markdown(f\"### Data Shape: {df.shape}\"),\n",
+    "        pn.pane.Markdown(f\"### Data Head\"),\n",
+    "        pn.pane.DataFrame(df.head(5)),\n",
+    "        pn.pane.Markdown(f\"### Describe\"),\n",
+    "        pn.pane.DataFrame(df.describe()),\n",
+    "    \n",
+    "    )\n",
+    "    return widget\n",
+    "    \n",
     "\n",
     "bound_data = pn.bind(get_data, switch=switch, url=url, file=file)\n",
     "pn.Column(\n",
@@ -307,7 +336,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 365,
+   "execution_count": 449,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -316,7 +345,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 366,
+   "execution_count": 450,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -331,7 +360,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 367,
+   "execution_count": 451,
    "metadata": {},
    "outputs": [],
    "source": [

app.py

@@ -16,20 +16,34 @@ import io
 pn.extension(
     template="fast",
 )
+pn.Column(
+    pn.pane.Markdown(
+        """
+        # Welcome to the Interactive Data App
 
+        This app allows you to interact with the data in a number of ways.
+        """
+    )
+).servable(target="sidebar");
 
 # %% app.ipynb 3
-switch = pn.widgets.Switch(name="URL - FILE", value=False)
-# pn.Row(switch).servable(target="sidebar");
+pn.Column(
+    pn.pane.Markdown(
+        """
+        ## Data Input
+
+        You can either input the URL of a dataset or upload a file.
+        """
+    ),
+).servable(target="sidebar");
 
+switch = pn.widgets.Switch(name="URL - FILE", value=False)
 url = pn.widgets.TextAreaInput(name="url", placeholder="Enter the url of the dataset", value="https://raw.githubusercontent.com/holoviz/panel/main/examples/assets/occupancy.csv");
 file = pn.widgets.FileInput(
     accept=".csv", name="Upload a CSV file",
 )
 
 
-
-
 # %% app.ipynb 4
 def show_input_widget(switch: pn.widgets.Switch):
     if not switch:
@@ -40,17 +54,31 @@ def show_input_widget(switch: pn.widgets.Switch):
 
 # %% app.ipynb 5
 def get_data(switch: pn.widgets.Switch, url: pn.widgets.TextAreaInput, file: pn.widgets.FileInput):
+    df = None
     if not switch:
         df = pd.read_csv(url)
-        cols = df.columns
-        return pn.Row(df.head(), df.hvplot(x=cols[0], y=cols[1:]).opts(width=600, height=400))
     else:
         if file is None:
             return "No file selected"
         df = pd.read_csv(io.BytesIO(file))
-        cols = df.columns
-        return pn.Column(df.head(), df.hvplot(x=cols[0], y=cols[1:]).opts(width=600, height=400)
-        )
+        
+    widget = pn.Column(
+        pn.pane.Markdown(
+            """
+            ## Data Preview
+
+            Here is a preview of the data.
+            """
+        ),
+        pn.pane.Markdown(f"### Data Shape: {df.shape}"),
+        pn.pane.Markdown(f"### Data Head"),
+        pn.pane.DataFrame(df.head(5)),
+        pn.pane.Markdown(f"### Describe"),
+        pn.pane.DataFrame(df.describe()),
+    
+    )
+    return widget
+    
 
 bound_data = pn.bind(get_data, switch=switch, url=url, file=file)
 pn.Column(