jupyterpack 0.5.6 → 0.6.1

package/README.md

@@ -21,14 +21,15 @@
   - [**Textual**](https://github.com/Textualize/textual)
   - [**Vizro**](https://github.com/mckinsey/vizro)
   - [**FastHTML**](https://github.com/AnswerDotAI/fasthtml)
+  - [**Gradio**](https://github.com/gradio-app/gradio)
+  - [**Mesop**](https://github.com/mesop-dev/mesop)
+  - [**NiceGUI**](https://github.com/zauberzeug/nicegui)
 
-  You can also use `jupyterpack` to serve any [**Flask**](https://github.com/pallets/flask), [**Starlette**](https://github.com/Kludex/starlette) or [**Tornado**](https://github.com/tornadoweb/tornado) application.
+  You can also use `jupyterpack` to serve any [**Flask**](https://github.com/pallets/flask), [**Starlette**](https://github.com/Kludex/starlette) or [**Tornado**](https://github.com/tornadoweb/tornado) application. Example of each framework can be found in the [demo](https://github.com/trungleduc/jupyterpack/tree/main/demo/files) folder.
 
 - **JavaScript Web Apps**: Bundle and serve JavaScript web applications using in-browser bundlers.
 
-Example of each framework can be found in the [demo](https://github.com/trungleduc/jupyterpack/tree/main/demo/files) folder.
-
-- ** Direct link to your app**: Share your app with others by generating a direct link to your app. This link can be shared with anyone and will open your app in the browser (see the [toolbar buttons](https://github.com/trungleduc/jupyterpack/edit/main/README.md#toolbar-buttons)).
+- **Direct link to your app**: Share your app with others by generating a direct link to your app. This link can be shared with anyone and will open your app in the browser (see the [toolbar buttons](https://github.com/trungleduc/jupyterpack/edit/main/README.md#toolbar-buttons)).
 
 ## Installation
 
@@ -52,121 +53,39 @@ You can try it online by clicking on this badge:
 
 `jupyterpack` currently supports only `xeus-python` kernel and does **not** support `pyodide-kernel`. You can refer to the `xeus-python` [official documentation](https://jupyterlite-xeus.readthedocs.io/en/stable/deploy.html) for the base setup of JupyterLite with `xeus-python` kernel.
 
-### Framework-specific setup
-
-At runtime, `jupyterpack` can automatically install the dependencies required by the supported frameworks.
-Alternatively, you can preinstall framework dependencies directly into your JupyterLite build. When dependencies are preinstalled, runtime installation can be skipped by setting `disableDependencies` to `true` in your `.spk` file.
+## Usage
 
-Below are example environment.yml files for each supported framework.
+### Using shebang in python script
 
-- **Dash**
+You can use `jupyterpack` to run your application script by adding the following shebang to the top of your Python script:
 
-```yaml
-name: xeus-kernels
-channels:
-  - https://repo.prefix.dev/emscripten-forge-dev
-  - https://repo.prefix.dev/conda-forge
-dependencies:
-  - xeus-python
-  - jupyterpack
-  - dash
-  - werkzeug>=2.2,<3.0
-  - blinker>=1.5.0,<2
-  - cachetools>=4.0,<7
-  - pip:
-      - pyodide_http
 ```
-
-- **Streamlit**
-
-```yaml
-name: xeus-kernels
-channels:
-  - https://repo.prefix.dev/emscripten-forge-dev
-  - https://repo.prefix.dev/conda-forge
-dependencies:
-  - xeus-python
-  - jupyterpack
-  - blinker>=1.5.0,<2
-  - cachetools>=4.0,<7
-  - protobuf
-  - altair
-  - pyarrow
-  - pip:
-      - streamlit>=1.50.0
-      - pyodide_http
+#! jupyterpack.<name-of-the-used-framework>
 ```
 
-- **Shiny**
+The available shebang options are:
 
-```yaml
-name: xeus-kernels
-channels:
-  - https://repo.prefix.dev/emscripten-forge-dev
-  - https://repo.prefix.dev/conda-forge
-dependencies:
-  - xeus-python
-  - jupyterpack
-  - pip:
-      - shiny
-      - shinychat
-      - pyodide_http
-```
+- `#! jupyterpack.dash` for Dash
+- `#! jupyterpack.streamlit` for Streamlit
+- `#! jupyterpack.panel` for Panel
+- `#! jupyterpack.shiny` for Shiny
+- `#! jupyterpack.textual` for Textual
+- `#! jupyterpack.vizro` for Vizro
+- `#! jupyterpack.fasthtml` for Fasthtml
+- `#! jupyterpack.gradio` for Gradio
+- `#! jupyterpack.mesop` for Mesop
+- `#! jupyterpack.nicegui` for NiceGUI
 
-- **Panel**
+After adding the shebang, you have two options to run your application:
 
-```yaml
-name: xeus-kernels
-channels:
-  - https://repo.prefix.dev/emscripten-forge-dev
-  - https://repo.prefix.dev/conda-forge
-dependencies:
-  - xeus-python
-  - jupyterpack
-  - panel
-  - pip:
-      - pyodide_http
-```
+1. **Open from file browser**: Right-click the Python file in JupyterLab and select `Open with` > `Jupyterpack`.
+2. **Using toolbar buttons**: Open the Python file using the `Editor` then click on `Open with Jupyterpack` button in the toolbar.
 
-- **Texual**
+### Using a `.spk` file
 
-```yaml
-name: xeus-kernels
-channels:
-  - https://repo.prefix.dev/emscripten-forge-dev
-  - https://repo.prefix.dev/conda-forge
-dependencies:
-  - xeus-python
-  - jupyterpack
-  - textual
-  - textual-serve
-  - pip:
-      - pyodide_http
-```
+Instead of using a shebang, you can create a `.spk` file to define your application. Using a `spk` file is useful when you want to specify additional configurations or dependencies for your application.
 
-- **Vizro**
-
-```yaml
-name: xeus-kernels
-channels:
-  - https://repo.prefix.dev/emscripten-forge-dev
-  - https://repo.prefix.dev/conda-forge
-dependencies:
-  - xeus-python
-  - jupyterpack
-  - werkzeug>=2.2,<3.0
-  - blinker>=1.5.0,<2
-  - cachetools>=4.0,<7
-  - vizro
-  - pip:
-      - pyodide_http
-```
-
-## Usage
-
-### Create a `.spk` file
-
-To use `jupyterpack`, you need to create a `.spk` file that defines your web application. Here's an example structure of a React application:
+Here's an example structure of a React application:
 
 ```bash
 my_app/
@@ -283,6 +202,10 @@ interface IJupyterPackFileFormat {
 
 ## Framework-specific configurations
 
+Each framework requires specific setup and runtime configuration. This section covers framework-specific requirements and how `Jupyterpack` handles dependencies.
+
+By default, `Jupyterpack` automatically installs framework dependencies at runtime when you run your application. However, you can optimize startup time by preinstalling dependencies directly into your JupyterLite build. When dependencies are preinstalled, disable automatic installation by setting `disableDependencies: true` in your `.spk` file.
+
 ### Dash application
 
 Same as the React application, here is the structure of a Dash application:
@@ -308,12 +231,50 @@ Do **not** call `app.run_server()` yourself — `jupyterpack` is responsible for
 
 As with React applications, double-clicking the `.spk` file will open the Dash app in a new JupyterLab tab.
 
+Here is the environment file for Dash applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - dash
+  - werkzeug>=2.2,<3.0
+  - blinker>=1.5.0,<2
+  - cachetools>=4.0,<7
+  - pip:
+      - pyodide_http
+```
+
 ### Streamlit application
 
-There is no special requirement for Streamlit applications, just write your code as a standard Streamlit application and do **not** start the server manually — `jupyterpack` will handle execution and serving automatically.
+There are no special requirements for Streamlit applications, just write your code as a standard Streamlit application and do **not** start the server manually — `jupyterpack` will handle execution and serving automatically.
 
 Opening the `.spk` file will launch the Streamlit app in a new JupyterLab tab.
 
+Since `streamlit` can't be installed using `conda`, you need to install in in the `pip` section. Here is the environment file for Streamlit applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - blinker>=1.5.0,<2
+  - cachetools>=4.0,<7
+  - protobuf
+  - altair
+  - pyarrow
+  - pip:
+      - streamlit>=1.50.0
+      - pyodide_http
+```
+
 ### Shiny application
 
 `jupyterpack` supports both **Shiny Express** and **Shiny Core** applications.
@@ -323,21 +284,195 @@ Opening the `.spk` file will launch the Streamlit app in a new JupyterLab tab.
 
 In both cases, the server is managed by `jupyterpack`, and opening the `.spk` file will launch the app in JupyterLab.
 
+Here is the environment file for Shiny applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - pip:
+      - shiny
+      - shinychat
+      - pyodide_http
+```
+
 ### Panel application
 
-There is no special requirement for Panel applications, just write your code as a standard Panel application and call `.servable()` on the layout you want to serve.
+There are no special requirements for Panel applications, just write your code as a standard Panel application and call `.servable()` on the layout you want to serve.
+
+Here is the environment file for Panel applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - panel
+  - pip:
+      - pyodide_http
+```
 
 ### Textual application
 
 You must define your Textual application as a variable named `app` and do not call `app.run()` yourself — `jupyterpack` is responsible for starting and managing the server lifecycle.
 
+Here is the environment file for Textual applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - textual
+  - textual-serve
+  - pip:
+      - pyodide_http
+```
+
 ### Vizro application
 
-There is no special requirement for Vizro applications, just write your code as a standard Vizro application and call `Vizro().build(...).run()` to serve your dashboard.
+There are no special requirements for Vizro applications, just write your code as a standard Vizro application and call `Vizro().build(...).run()` to serve your dashboard.
+
+Here is the environment file for Vizro applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - werkzeug>=2.2,<3.0
+  - blinker>=1.5.0,<2
+  - cachetools>=4.0,<7
+  - vizro
+  - pip:
+      - pyodide_http
+```
 
 ### FastHTML application
 
-JupyterPack only supports async handlers with FastHTML. You must convert all synchronous handlers to async, and you should not call `serve()` yourself — jupyterpack is responsible for starting and managing the server lifecycle.
+There are no special requirements for FastHTML applications, just write your code as a standard FastHTML application. You should not call `serve()` yourself — jupyterpack is responsible for starting and managing the server lifecycle.
+Here is the environment file for FastHTML applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - fastapi
+  - fastcore
+  - fastlite
+  - itsdangerous
+  - oauthlib
+  - beautifulsoup4
+  - pip:
+      - python-fasthtml
+      - uvicorn
+      - pyodide_http
+```
+
+### Gradio application
+
+There are no special requirements for Gradio applications, just write your code as a standard Vizro application and call the `launch` method to serve your dashboard.
+
+Due to the setup of Gradio, you need to put `gradio` and `gradio-client` in the pip section of the `environment.yml` file. For the remaininng dependencies, they are handled by `jupyterpack` automatically, but you can also specify them in the `environment.yml` file to improve the loading time. Here is the example of the `environment.yml` file for Gradio.
+Here is the environment file for Gradio applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - fastapi
+  - pillow
+  - huggingface_hub
+  - aiofiles
+  - safehttpx
+  - semantic_version
+  - pydub
+  - tomlkit
+  - pip:
+      - gradio
+      - gradio-client
+      - pyodide_http
+```
+
+### Mesop application
+
+There are no special requirements for Mesop applications. Just write your code as a standard Mesop application, and opening the `.spk` file will launch the app in JupyterLab.
+
+Since Mesop is not available in the conda-forge channel. You need to install it via pip.
+Here is the environment file for Mesop applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - flask
+  - absl-py
+  - deepdiff>=8.6.1,<9
+  - msgpack
+  - pydantic
+  - python-dotenv
+  - sqlalchemy
+  - pip:
+      - mesop
+      - flask-sock
+      - pyodide_http
+```
+
+### NiceGUI application
+
+There are no special requirements for NiceGUI applications. Jupyterpack supports creating pages using the page decorator, root function and script mode.
+
+Due to the setup of NiceGUI, you need to include it into the `pip` section of the environment file. Here is an example environment file for NiceGUI applications:
+
+```yaml
+name: xeus-kernels
+channels:
+  - https://repo.prefix.dev/emscripten-forge-dev
+  - https://repo.prefix.dev/conda-forge
+dependencies:
+  - xeus-python
+  - jupyterpack
+  - python-multipart
+  - python-socketio
+  - pydantic >=1.10.21,<3.0
+  - fastapi
+  - rich
+  - markdown2
+  - itsdangerous
+  - ifaddr
+  - jinja2
+  - docutils
+  - vbuild
+  - wait_for2
+  - pip:
+      - nicegui
+      - pyodide_http
+```
 
 ## License
 

package/lib/document/plugin.js

@@ -2,14 +2,16 @@ import { WidgetTracker } from '@jupyterlab/apputils';
 import { ILauncher } from '@jupyterlab/launcher';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IConnectionManagerToken, IJupyterpackDocTrackerToken } from '../token';
-import { dashIcon, decodeSpk, fasthtmlIcon, logoIcon, panelIcon, shinyIcon, streamlitIcon, textualIcon, vizroIcon } from '../tools';
+import { dashIcon, decodeSpk, fasthtmlIcon, gradioIcon, logoIcon, mesopIcon, niceguiIcon, panelIcon, shinyIcon, streamlitIcon, textualIcon, vizroIcon } from '../tools';
 import { JupyterPackFramework } from '../type';
 import { addCommands, addLauncherCommands } from './commands';
 import { JupyterPackWidgetFactory } from './widgetFactory';
 import { spkFactory } from './templates/spk';
 import { newFile } from './templates';
+import { SpkButtonExtention } from './spkButton';
 const FACTORY = 'jupyterpack';
 const CONTENT_TYPE = 'jupyterpack';
+const PY_CONTENT_TYPE = 'jupyterpack-py';
 export const spkPlugin = {
     id: 'jupyterpack:spkplugin',
     requires: [IConnectionManagerToken],
@@ -23,7 +25,7 @@ export const spkPlugin = {
         const widgetFactory = new JupyterPackWidgetFactory({
             name: FACTORY,
             modelName: 'text',
-            fileTypes: [CONTENT_TYPE],
+            fileTypes: [CONTENT_TYPE, PY_CONTENT_TYPE],
             defaultFor: [CONTENT_TYPE],
             commands: app.commands,
             manager: app.serviceManager,
@@ -42,6 +44,15 @@ export const spkPlugin = {
             contentType: CONTENT_TYPE,
             icon: logoIcon
         });
+        app.docRegistry.addFileType({
+            name: PY_CONTENT_TYPE,
+            displayName: 'PY',
+            mimeTypes: ['text/x-python'],
+            extensions: ['.py', '.PY'],
+            fileFormat: 'text',
+            contentType: PY_CONTENT_TYPE,
+            icon: logoIcon
+        });
         widgetFactory.widgetCreated.connect((_, widget) => {
             widget.title.icon = logoIcon;
             widget.context.pathChanged.connect(() => {
@@ -49,6 +60,8 @@ export const spkPlugin = {
             });
             tracker.add(widget);
         });
+        const spkButtonExt = new SpkButtonExtention(app.commands);
+        app.docRegistry.addWidgetExtension('Editor', spkButtonExt);
         return tracker;
     }
 };
@@ -57,7 +70,6 @@ export const launcherPlugin = {
     id: 'jupyterpack:spklauncher',
     optional: [ILauncher],
     autoStart: true,
-    provides: IJupyterpackDocTrackerToken,
     activate: (app, launcher) => {
         if (!launcher) {
             return;
@@ -96,7 +108,10 @@ export const launcherPlugin = {
             [JupyterPackFramework.PANEL]: panelIcon,
             [JupyterPackFramework.TEXTUAL]: textualIcon,
             [JupyterPackFramework.VIZRO]: vizroIcon,
-            [JupyterPackFramework.FASTHTML]: fasthtmlIcon
+            [JupyterPackFramework.FASTHTML]: fasthtmlIcon,
+            [JupyterPackFramework.GRADIO]: gradioIcon,
+            [JupyterPackFramework.MESOP]: mesopIcon,
+            [JupyterPackFramework.NICEGUI]: niceguiIcon
         };
         Object.entries(iconMap).forEach(([framework, icon], index) => {
             addLauncherCommands({

package/lib/document/spkButton.d.ts

@@ -0,0 +1,9 @@
+import { ToolbarButton } from '@jupyterlab/apputils';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { CommandRegistry } from '@lumino/commands';
+import { Widget } from '@lumino/widgets';
+export declare class SpkButtonExtention implements DocumentRegistry.IWidgetExtension<Widget, DocumentRegistry.IModel> {
+    constructor(commands: CommandRegistry);
+    createNew(panel: Widget): ToolbarButton;
+    private _commands;
+}

package/lib/document/spkButton.js

@@ -0,0 +1,22 @@
+import { ToolbarButton } from '@jupyterlab/apputils';
+import { logoIcon } from '../tools';
+export class SpkButtonExtention {
+    constructor(commands) {
+        this._commands = commands;
+    }
+    createNew(panel) {
+        const button = new ToolbarButton({
+            className: 'spkButton',
+            icon: logoIcon,
+            tooltip: 'Open with JupyterPack',
+            onClick: () => {
+                this._commands.execute('docmanager:open', {
+                    factory: 'jupyterpack',
+                    path: panel.context.localPath
+                });
+            }
+        });
+        panel.toolbar.addItem('openWithSpk', button);
+        return button;
+    }
+}

package/lib/document/templates/gradio.d.ts

@@ -0,0 +1 @@
+export declare const GRADIO_APP = "\n# This example is taken from the Panel official documentation (https://github.com/gradio-app/gradio?tab=readme-ov-file#building-your-first-demo)\n\nimport gradio as gr\n\n\ndef greet(name, intensity):\n    return \"Hello, \" + name + \"!\" * int(intensity)\n\n\ndemo = gr.Interface(\n    fn=greet,\n    inputs=[\"text\", \"slider\"],\n    outputs=[\"text\"],\n)\n\ndemo.launch()\n\n";

package/lib/document/templates/gradio.js

@@ -0,0 +1,19 @@
+export const GRADIO_APP = `
+# This example is taken from the Panel official documentation (https://github.com/gradio-app/gradio?tab=readme-ov-file#building-your-first-demo)
+
+import gradio as gr
+
+
+def greet(name, intensity):
+    return "Hello, " + name + "!" * int(intensity)
+
+
+demo = gr.Interface(
+    fn=greet,
+    inputs=["text", "slider"],
+    outputs=["text"],
+)
+
+demo.launch()
+
+`;

package/lib/document/templates/index.js

@@ -8,6 +8,9 @@ import { STREAMLIT_APP } from './streamlit';
 import { TEXTUAL_APP } from './textual';
 import { VIZRO_APP } from './vizro';
 import { FASTHTML_APP } from './fasthtml';
+import { GRADIO_APP } from './gradio';
+import { MESOP_APP } from './mesop';
+import { NICEGUI_APP } from './nicegui';
 export async function generateAppFiles(options) {
     const { contentsManager, framework, cwd } = options;
     const newPath = await newDirectory({
@@ -50,6 +53,18 @@ export async function generateAppFiles(options) {
             appContent = FASTHTML_APP;
             break;
         }
+        case JupyterPackFramework.GRADIO: {
+            appContent = GRADIO_APP;
+            break;
+        }
+        case JupyterPackFramework.MESOP: {
+            appContent = MESOP_APP;
+            break;
+        }
+        case JupyterPackFramework.NICEGUI: {
+            appContent = NICEGUI_APP;
+            break;
+        }
         default:
             break;
     }

package/lib/document/templates/mesop.d.ts

@@ -0,0 +1 @@
+export declare const MESOP_APP = "\n# This example is taken from the mesop official repository (https://github.com/mesop-dev/mesop?tab=readme-ov-file#write-your-first-mesop-app-in-less-than-10-lines-of-code)\n\nimport mesop as me\nimport mesop.labs as mel\n\n\n@me.page(\n    path=\"/\",\n    title=\"Text to Text Example\"\n)\ndef app():\n    mel.text_to_text(\n        upper_case_stream,\n        title=\"Text to Text Example\",\n    )\n\n\ndef upper_case_stream(s: str):\n    return \"Echo: \" + s.capitalize()\n\n\n";

package/lib/document/templates/mesop.js

@@ -0,0 +1,23 @@
+export const MESOP_APP = `
+# This example is taken from the mesop official repository (https://github.com/mesop-dev/mesop?tab=readme-ov-file#write-your-first-mesop-app-in-less-than-10-lines-of-code)
+
+import mesop as me
+import mesop.labs as mel
+
+
+@me.page(
+    path="/",
+    title="Text to Text Example"
+)
+def app():
+    mel.text_to_text(
+        upper_case_stream,
+        title="Text to Text Example",
+    )
+
+
+def upper_case_stream(s: str):
+    return "Echo: " + s.capitalize()
+
+
+`;

package/lib/document/templates/nicegui.d.ts

@@ -0,0 +1 @@
+export declare const NICEGUI_APP = "\n#! jupyterpack.nicegui\n# This example is taken from https://nicegui.io/#single-page_applications\n\nfrom nicegui import ui\n\n\ndef root():\n    ui.sub_pages(\n        {\n            \"/\": table_page,\n            \"/map/{lat}/{lon}\": map_page,\n        }\n    ).classes(\"w-full\")\n\n\ndef table_page():\n    ui.table(\n        rows=[\n            {\"name\": \"New York\", \"lat\": 40.7119, \"lon\": -74.0027},\n            {\"name\": \"London\", \"lat\": 51.5074, \"lon\": -0.1278},\n            {\"name\": \"Tokyo\", \"lat\": 35.6863, \"lon\": 139.7722},\n        ]\n    ).on(\n        \"row-click\",\n        lambda e: ui.navigate.to(f\"/map/{e.args[1]['lat']}/{e.args[1]['lon']}\"),\n    )\n\n\ndef map_page(lat: float, lon: float):\n    ui.leaflet(center=(lat, lon), zoom=10)\n    ui.link(\"Back to table\", \"/\")\n\n\nui.run(root)\n";

package/lib/document/templates/nicegui.js

@@ -0,0 +1,36 @@
+export const NICEGUI_APP = `
+#! jupyterpack.nicegui
+# This example is taken from https://nicegui.io/#single-page_applications
+
+from nicegui import ui
+
+
+def root():
+    ui.sub_pages(
+        {
+            "/": table_page,
+            "/map/{lat}/{lon}": map_page,
+        }
+    ).classes("w-full")
+
+
+def table_page():
+    ui.table(
+        rows=[
+            {"name": "New York", "lat": 40.7119, "lon": -74.0027},
+            {"name": "London", "lat": 51.5074, "lon": -0.1278},
+            {"name": "Tokyo", "lat": 35.6863, "lon": 139.7722},
+        ]
+    ).on(
+        "row-click",
+        lambda e: ui.navigate.to(f"/map/{e.args[1]['lat']}/{e.args[1]['lon']}"),
+    )
+
+
+def map_page(lat: float, lon: float):
+    ui.leaflet(center=(lat, lon), zoom=10)
+    ui.link("Back to table", "/")
+
+
+ui.run(root)
+`;