Merge pull request #1 from tilman151/feat/add-on-click-callback

feat: add on click callback

Author: CarloLepelaars

.github/workflows/ci.yml

@@ -37,7 +37,7 @@ jobs:
 
       - name: Run tests
         run: |
-          pytest -s
+          pytest -s -m "not e2e"
 
       - name: Build wheel
         run: |
@@ -47,3 +47,27 @@ jobs:
       - name: Install built wheel
         run: |
           uv pip install dist/*.whl
+
+  e2e:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: [ '3.10', '3.11', '3.12' ]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Install uv
+        uses: astral-sh/setup-uv@v4
+        with:
+          python-version: ${{ matrix.python-version }}
+      - name: Install deps
+        run: uv sync --all-extras
+      - id: cache-browser
+        uses: actions/cache@v4
+        with:
+          path: /home/runner/.cache/ms-playwright
+          key: ${{ runner.os }}-browser
+      - name: Set up playwright
+        run: uv run playwright install chromium --with-deps
+      - name: Run e2e tests
+        run: uv run pytest -m e2e

examples/callback_app.py

@@ -0,0 +1,33 @@
+import plotly.data
+import plotly.express as px
+from fasthtml import serve, ft
+from fasthtml.fastapp import fast_app
+from fh_plotly import plotly_headers, plotly2fasthtml
+from fh_plotly.p2fh import OnClick
+
+app, rt = fast_app(hdrs=(plotly_headers,), live=True)
+
+
+@rt("/", methods=["GET"])
+def _():
+    data = plotly.data.iris()
+    plot = px.scatter(data, x="sepal_width", y="sepal_length", color="species")
+
+    return ft.Main(
+        ft.H1("Plotly Callback Example"),
+        plotly2fasthtml(
+            plot,
+            callbacks=[OnClick(hx_post="/click", hx_target="#callback-display")],
+        ),
+        ft.H2("Click a marker to trigger a callback!"),
+        ft.P(id="callback-display", data_testid="callback-display"),
+        cls="container",
+    )
+
+
+@rt("/click", methods=["POST"])
+def _(x: float, y: float, plot_id: str):
+    return f"Server received click on ({x}, {y}) from plot: {plot_id}."
+
+
+serve()

fh_plotly/p2fh.py

@@ -1,17 +1,70 @@
+from dataclasses import dataclass
+from typing import Optional
 from uuid import uuid4
 from plotly.io import to_json
 from fasthtml.common import Div, Script
 
-plotly_headers = [Script(src="https://cdn.plot.ly/plotly-latest.min.js")]
 
+plotly_headers = [
+    Script(src="https://cdn.plot.ly/plotly-latest.min.js"),
+    Script(
+        """
+    const fhPlotlyRegisterOnClick = (plotId, hxPostEndpoint, hxTarget) => {
+        const plotlyPlot = document.getElementById(plotId);
+        plotlyPlot.on('plotly_click', (data) => {
+            const point = data.points[0];
+            const x = point.x;
+            const y = point.y;
+            const payload = new FormData();
+            payload.append('x', x);
+            payload.append('y', y);
+            payload.append('plot_id', plotId);
+            htmx.ajax("POST", hxPostEndpoint, {values: payload, target: hxTarget});
+        });
+    };
+    """
+    ),
+]
 
-def plotly2fasthtml(chart):
+
+def plotly2fasthtml(chart, callbacks=None):
     chart_id = f"uniq-{uuid4()}"
     chart_json = to_json(chart)
+    if callbacks:
+        for callback in callbacks:
+            callback.register_plot(chart_id)
+
     return Div(
-        Script(f"""
+        Script(
+            f"""
         var plotly_data = {chart_json};
         Plotly.newPlot('{chart_id}', plotly_data.data, plotly_data.layout);
-    """),
+    """
+        ),
+        *(callbacks or []),
         id=chart_id,
     )
+
+
+@dataclass
+class OnClick:
+    hx_post: str
+    hx_target: str
+    plot_id: Optional[str] = None
+
+    def register_plot(self, plot_id):
+        self.plot_id = plot_id
+
+    def __ft__(self):
+        if self.plot_id is None:
+            raise ValueError(
+                "The 'plot_id' needs to be set on initialization or the callback must "
+                "be passed to the 'plotly2fasthtml' function in the 'callbacks' "
+                "argument."
+            )
+
+        return Script(
+            f"""
+            fhPlotlyRegisterOnClick('{self.plot_id}', '{self.hx_post}', '{self.hx_target}');
+        """
+        )

pyproject.toml

@@ -19,14 +19,14 @@ dev = [
     "pytest>=8.3.2",
     "pandas>=2.2.2",
     "numpy>=2.0.1",
-    "fastcore>=1.7.1",
+    "fastcore>=1.7.1"
 ]
 
 [tool.ruff]
 line-length = 300
 
 [tool.ruff.lint]
-ignore = ["I001","F403", "F405", "F811"] 
+ignore = ["I001","F403", "F405", "F811"]
 select = ["E", "F", "I"]
 
 [tool.ruff.lint.per-file-ignores]
@@ -35,7 +35,16 @@ select = ["E", "F", "I"]
 [tool.pytest.ini_options]
 testpaths = ["tests"]
 pythonpath = ["src"]
+markers = [
+    "e2e: end-to-end tests",
+]
 
 [build-system]
 requires = ["setuptools>=61.0"]
 build-backend = "setuptools.build_meta"
+
+[dependency-groups]
+dev = [
+    "pytest-playwright>=0.6.2",
+    "requests>=2.32.3",
+]

tests/conftest.py

@@ -0,0 +1,32 @@
+import multiprocessing
+from time import sleep
+
+import pytest
+import uvicorn
+
+
+@pytest.fixture(scope="module")
+def callback_server():
+    import requests
+
+    process = multiprocessing.Process(
+        target=uvicorn.run,
+        args=("examples.callback_app:app",),
+        kwargs={"host": "localhost", "port": 5001},
+        daemon=True,
+    )
+    process.start()
+    for i in range(50):  # 5-second timeout
+        sleep(0.1)
+        try:
+            requests.get("http://localhost:5001")
+        except requests.ConnectionError:
+            continue
+        else:
+            break
+    else:
+        raise TimeoutError("Server did not start in time")
+
+    yield process
+
+    process.terminate()

tests/test_p2fh.py

@@ -1,6 +1,7 @@
 import fastcore
 import pandas as pd
 import plotly.express as px
+import pytest
 
 from fh_plotly import plotly2fasthtml
 
@@ -43,3 +44,13 @@ def test_3d_surface():
     html_div = plotly2fasthtml(fig)
     assert html_div is not None
     assert isinstance(html_div, fastcore.xml.FT)
+
+
+@pytest.mark.e2e
+def test_callback(callback_server, page):
+    page.goto("localhost:5001")
+    click_layer = page.locator("svg.main-svg rect.nsewdrag.drag")
+    click_layer.click(position={"x": 630, "y": 250})
+    callback_text = page.get_by_test_id("callback-display").inner_text()
+
+    assert callback_text.startswith("Server received click on (3.6, 5.0) from plot")