Add support matplotlib using plot component (with example and docs)

Author: wwwillchen

build_defs/defaults.bzl

@@ -81,6 +81,10 @@ THIRD_PARTY_PY_LIBCST = [
     requirement("libcst"),
 ]
 
+THIRD_PARTY_PY_MATPLOTLIB = [
+    requirement("matplotlib"),
+]
+
 THIRD_PARTY_PY_PYDANTIC = [
     requirement("pydantic"),
 ]

build_defs/requirements.txt

@@ -7,3 +7,5 @@ mkdocstrings[python]
 pydantic==1.10
 --no-binary pydantic
 libcst==1.1.0
+
+matplotlib # only used for example

build_defs/requirements_lock.txt

@@ -0,0 +1,13 @@
+## Overview
+
+Plot provides a convenient way to render [Matplotlib](https://matplotlib.org/) figures as an image.
+
+## Examples
+
+```python
+--8<-- "mesop/examples/integrations/matplotlib.py"
+```
+
+## API
+
+::: mesop.components.plot.plot.plot

docs/components/plot.md

@@ -22,6 +22,7 @@ py_library(
         "//mesop/components/audio:py",
         "//mesop/components/image:py",
         "//mesop/components/slider:py",
+        "//mesop/components/plot:py",
         "//mesop/components/select:py",
         "//mesop/components/radio:py",
         "//mesop/components/slide_toggle:py",

mesop/BUILD

@@ -55,6 +55,9 @@
 from mesop.components.input.input import input as input
 from mesop.components.input.input import textarea as textarea
 from mesop.components.markdown.markdown import markdown as markdown
+from mesop.components.plot.plot import (
+  plot as plot,
+)
 from mesop.components.progress_bar.progress_bar import (
   progress_bar as progress_bar,
 )

mesop/__init__.py

@@ -1,4 +1,4 @@
-load("//build_defs:defaults.bzl", "THIRD_PARTY_PY_ABSL_PY", "THIRD_PARTY_PY_PYTEST", "py_binary", "py_library", "py_test")
+load("//build_defs:defaults.bzl", "THIRD_PARTY_PY_ABSL_PY", "THIRD_PARTY_PY_MATPLOTLIB", "THIRD_PARTY_PY_PYTEST", "py_binary", "py_library", "py_test")
 
 package(
     default_visibility = ["//build_defs:mesop_internal"],
@@ -13,7 +13,7 @@ COMMON_DEPS = [
     "//mesop",  # Keep dep to ensure the entire Mesop library is loaded.
     "//mesop/exceptions",
     "//mesop/runtime",
-] + THIRD_PARTY_PY_ABSL_PY
+] + THIRD_PARTY_PY_ABSL_PY + THIRD_PARTY_PY_MATPLOTLIB  # Used for /examples
 
 exports_files(["cli.py"])
 

mesop/cli/BUILD

@@ -0,0 +1,11 @@
+load("//build_defs:defaults.bzl", "py_library")
+
+package(
+    default_visibility = ["//build_defs:mesop_internal"],
+)
+
+py_library(
+    name = "py",
+    srcs = glob(["*.py"]),
+    deps = ["//mesop/components/image:py"],
+)

mesop/components/plot/BUILD

@@ -0,0 +1,31 @@
+import base64
+from io import BytesIO
+from typing import Protocol
+
+from mesop.component_helpers import Style, component
+from mesop.components.image.image import image
+
+
+class Figure(Protocol):
+  """
+  Provides a minimal interface based on matplotlib's Figure class.
+  """
+
+  def savefig(self, fname: BytesIO, *, format: str):
+    pass
+
+
+@component
+def plot(figure: Figure, *, style: Style | None = None):
+  """
+  Creates a plot component from a Matplotlib figure.
+
+  Args:
+    figure: A [Matplotlib figure](https://matplotlib.org/stable/api/figure_api.html#matplotlib.figure.Figure) which will be rendered.
+    style: An optional Style object that defines the visual styling for the
+      plot component. If None, default styling (e.g. height, width) is used.
+  """
+  buf = BytesIO()
+  figure.savefig(buf, format="png")
+  data = base64.b64encode(buf.getbuffer()).decode("ascii")
+  image(src=f"data:image/png;base64,{data}", style=style)