nova-trame 0.15.0__py3-none-any.whl → 0.16.0__py3-none-any.whl

nova/trame/view/components/visualization/__init__.py

@@ -1,3 +1,4 @@
 from .interactive_2d_plot import Interactive2DPlot
+from .matplotlib_figure import MatplotlibFigure
 
-__all__ = ["Interactive2DPlot"]
+__all__ = ["Interactive2DPlot", "MatplotlibFigure"]

nova/trame/view/components/visualization/matplotlib_figure.py

@@ -0,0 +1,307 @@
+"""View implementation for MatplotlibFigure."""
+
+import json
+import os
+import socketserver
+from asyncio import FIRST_COMPLETED, new_event_loop, set_event_loop, wait
+from io import BytesIO
+from mimetypes import types_map
+from pathlib import Path
+from threading import Thread
+from typing import Any, Optional
+
+import tornado
+from aiohttp import ClientSession, WSMsgType, web
+from matplotlib import get_data_path
+from matplotlib.backends.backend_webagg import FigureManagerWebAgg, new_figure_manager_given_figure  # type: ignore
+from matplotlib.figure import Figure
+from trame.app import get_server
+from trame.widgets import client, html, matplotlib
+from wslink.backends.aiohttp import WebAppServer
+
+
+class _MPLApplication(tornado.web.Application):
+    """Tornado application compatible with Matplotlib's WebAgg backend."""
+
+    class WebSocket(tornado.websocket.WebSocketHandler):
+        """Implements the WebSocket manager for WebAgg."""
+
+        supports_binary = True
+
+        def check_origin(self, origin: Any) -> bool:
+            return True
+
+        def open(self, *args: Any, **kwargs: Any) -> None:
+            # Register the websocket with the FigureManager.
+            manager = self.application.manager  # type: ignore
+            manager.add_web_socket(self)
+            if hasattr(self, "set_nodelay"):
+                self.set_nodelay(True)
+
+        def on_close(self) -> None:
+            # When the socket is closed, deregister the websocket with
+            # the FigureManager.
+            manager = self.application.manager  # type: ignore
+            manager.remove_web_socket(self)
+
+        def on_message(self, message: Any) -> None:
+            # The 'supports_binary' message is relevant to the
+            # websocket itself.  The other messages get passed along
+            # to matplotlib as-is.
+
+            # Every message has a "type" and a "figure_id".
+            message = json.loads(message)
+            if message["type"] == "supports_binary":
+                self.supports_binary = message["value"]
+            else:
+                manager = self.application.manager  # type: ignore
+                manager.handle_json(message)
+
+        def send_json(self, content: Any) -> None:
+            set_event_loop(self.application.loop)  # type: ignore
+            self.write_message(json.dumps(content))
+
+        def send_binary(self, blob: Any) -> None:
+            set_event_loop(self.application.loop)  # type: ignore
+            if self.supports_binary:
+                self.write_message(blob, binary=True)
+            else:
+                data_uri = "data:image/png;base64," + blob.encode("base64").replace("\n", "")
+                self.write_message(data_uri)
+
+    def __init__(self, figure: Figure) -> None:
+        self.figure = figure
+        self.manager = new_figure_manager_given_figure(id(figure), figure)
+        self.loop = new_event_loop()
+
+        super().__init__([("/ws", self.WebSocket)])
+
+
+class MatplotlibFigure(matplotlib.Figure):
+    """Creates an interactive Matplotlib Figure using the WebAgg backend.
+
+    By default, this will leverage the built-in Trame widget for Matplotlib support. This built-in widget can display
+    poor performance for detailed plots due to it being locked into using SVG rendering.
+
+    If you experience this, then you can use the `webagg` parameter to enable the WebAgg backend for Matplotlib. This
+    will switch to server-side rendering leveraging the Anti-Grain Geometry engine.
+
+    .. code-block:: python
+
+        my_figure = matplotlib.figure.Figure()
+        MatplotlibFigure(my_figure)  # Display SVG-based plot in Trame
+        MatplotlibFigure(my_figure, webagg=True)  # Display WebAgg-based plot in Trame
+    """
+
+    mpl_initialized = False
+    mpl_instances: dict[int, "MatplotlibFigure"] = {}
+
+    @classmethod
+    def _get_free_port(cls) -> int:
+        with socketserver.TCPServer(("localhost", 0), None) as s:  # type: ignore
+            return s.server_address[1]
+
+    @classmethod
+    def _setup_mpl(cls) -> None:
+        server = get_server(None, client_type="vue3")
+
+        @server.controller.add("on_server_bind")
+        def _add_routes(wslink_server: WebAppServer) -> None:
+            # matplotlib WebAgg serves JS that will reference the base URL of the application, so we need to add
+            # endpoints to the main server to handle these requests.
+            wslink_server.app.add_routes(
+                [
+                    web.get("/_images/{image}", cls._mpl_image_endpoint),
+                    web.get("/download/{port}/{format}", cls._mpl_download_endpoint),
+                    web.get("/mpl/{port}", cls._mpl_ws_proxy_endpoint),
+                ]
+            )
+
+        # The CSS and JS files, on the other hand, can be preloaded into the page which is simpler.
+        css_path = Path(FigureManagerWebAgg.get_static_file_path(), "css")
+        for fname in os.listdir(css_path):
+            with open(Path(css_path, fname)) as css_file:
+                content = css_file.read()
+                client.Style(content)
+        client.Script(FigureManagerWebAgg.get_javascript())
+
+        MatplotlibFigure.mpl_initialized = True
+
+    @classmethod
+    async def _mpl_download_endpoint(cls, request: web.Request) -> web.Response:
+        # We use the websocket port to differentiate between plots if there are multiple WebAgg figures.
+        port = request.match_info.get("port", "")
+        format = request.match_info.get("format", "png")
+
+        if not port or int(port) not in MatplotlibFigure.mpl_instances:
+            raise web.HTTPNotFound
+
+        instance = MatplotlibFigure.mpl_instances[int(port)]
+
+        buff = BytesIO()
+        if instance._figure:
+            instance._figure.savefig(buff, format=format)
+        buff.seek(0)
+
+        return web.Response(body=buff.read(), headers={"Content-Type": types_map.get(format, "binary")})
+
+    @classmethod
+    async def _mpl_image_endpoint(cls, request: web.Request) -> web.Response:
+        image_name = request.match_info.get("image", None)
+
+        if image_name:
+            try:
+                with open(Path(get_data_path(), "images", image_name), mode="rb") as image_file:
+                    image_data = image_file.read()
+                    return web.Response(body=image_data)
+            except OSError as err:
+                raise web.HTTPNotFound from err
+
+        raise web.HTTPNotFound
+
+    @classmethod
+    async def _mpl_ws_proxy_endpoint(cls, request: web.Request) -> web.WebSocketResponse:
+        # The WebAgg backend assumes a tornado-based WebSocket handler, so we need to proxy it to work with Trame's
+        # aiohttp setup.
+        port = request.match_info.get("port", "")
+
+        # Initialize the proxy
+        ws_server = web.WebSocketResponse()
+        await ws_server.prepare(request)
+
+        # Connect to the tornado WebSocket handler
+        client_session = ClientSession(cookies=request.cookies)
+        async with client_session.ws_connect(
+            f"http://localhost:{port}/ws",
+        ) as ws_client:
+
+            async def ws_forward(ws_from: Any, ws_to: Any) -> None:
+                # The browser will send text messages for rendering requests and the server will send bytes to transmit
+                # rendered image data.
+                async for msg in ws_from:
+                    if msg.type == WSMsgType.TEXT:
+                        await ws_to.send_str(msg.data)
+                    elif msg.type == WSMsgType.BINARY:
+                        await ws_to.send_bytes(msg.data)
+                    else:
+                        raise ValueError("unexpected message type: %s", print(msg))
+
+            # Forward websocket data in both directions
+            await wait(
+                [ws_forward(ws_server, ws_client), ws_forward(ws_client, ws_server)], return_when=FIRST_COMPLETED
+            )
+            await client_session.close()  # Ensure the connection is cleaned up when the Trame client disconnects.
+
+            return ws_server
+
+    def __init__(self, figure: Optional[Figure] = None, webagg: bool = False, **kwargs: Any) -> None:
+        """Creates a Matplotlib figure in the Trame UI.
+
+        Parameters
+        ----------
+        figure : `altair.Chart <https://altair-viz.github.io/user_guide/generated/toplevel/altair.Chart.html#altair.Chart>`_
+            Altair chart object
+        webagg : bool
+            If true, then the WebAgg backend for Matplotlib is used. If not, then the default Trame matplotlib plugin
+            is used.
+        kwargs
+            Arguments to be passed to `AbstractElement <https://trame.readthedocs.io/en/latest/core.widget.html#trame_client.widgets.core.AbstractElement>`_
+
+        Returns
+        -------
+        None
+        """
+        self._webagg = webagg
+        if webagg:
+            self._port = MatplotlibFigure._get_free_port()
+            if "classes" in kwargs:
+                kwargs["classes"] += " nova-mpl"
+            else:
+                kwargs["classes"] = "nova-mpl"
+
+            html.Div(id=f"nova_mpl_{self._port}", **kwargs)
+
+            self._server = get_server(None, client_type="vue3")
+
+            self._figure = figure
+            self._initialized = False
+
+            if not MatplotlibFigure.mpl_initialized:
+                MatplotlibFigure._setup_mpl()
+            MatplotlibFigure.mpl_instances[self._port] = self
+
+            self.update()
+        else:
+            super().__init__(figure, **kwargs)
+
+    def update(self, figure: Optional[Figure] = None) -> None:
+        if self._webagg:
+            if figure:
+                self._figure = figure
+
+            if self._figure is not None and not self._initialized:
+                self._setup_figure_websocket()
+                self._setup_figure_javascript()
+
+                self._initialized = True
+
+            # Re-render the figure in the UI
+            if self._figure is not None:
+                self._figure.canvas.draw_idle()
+                self._figure.canvas.flush_events()
+        else:
+            super().update(figure)
+
+    def _setup_figure_websocket(self) -> None:
+        thread = Thread(target=self._mpl_run_ws_server, daemon=True)
+        thread.start()
+
+    def _setup_figure_javascript(self) -> None:
+        figure_js = """
+            function ondownload_%(port)d(figure, format) {
+                window.open('download/%(port)d/' + format, '_blank');
+            };
+
+            function ready_%(port)d(fn) {
+                if (document.getElementById("nova_mpl_%(port)d") === null) {
+                    setTimeout(() => {
+                        ready_%(port)d(fn);
+                    }, 100);
+                } else {
+                    fn();
+                }
+            }
+
+            ready_%(port)d(
+                function() {
+                    var websocket_type = mpl.get_websocket_type();
+                    var websocket = new websocket_type(`ws://${window.location.host}/mpl/%(port)d`);
+
+                    var fig = new mpl.figure(
+                        // A unique numeric identifier for the figure
+                        %(port)d,
+                        // A websocket object (or something that behaves like one)
+                        websocket,
+                        // A function called when a file type is selected for download
+                        ondownload_%(port)d,
+                        // The HTML element in which to place the figure
+                        document.getElementById("nova_mpl_%(port)d")
+                    );
+                }
+            );
+        """
+
+        client.Script(figure_js % {"port": self._port})  # TODO
+
+    def _mpl_run_ws_server(self) -> None:
+        if not self._figure:
+            return
+
+        application = _MPLApplication(self._figure)
+
+        http_server = tornado.httpserver.HTTPServer(application)
+        sockets = tornado.netutil.bind_sockets(self._port, "")
+        http_server.add_sockets(sockets)
+
+        ioloop = tornado.ioloop.IOLoop.instance()
+        ioloop.start()

nova/trame/view/theme/assets/core_style.scss

@@ -4,10 +4,22 @@ html {
 
 .d-grid {
     display: grid;
-    gap: 0.25em;
+    gap: 0.8em;
     grid-auto-rows: auto;
 }
 
+.v-toolbar {
+    box-shadow: none !important;
+}
+
+.mpl-message, .ui-dialog-titlebar {
+    display: none !important;
+}
+
+.nova-mpl * {
+    resize: none !important;
+}
+
 @media only screen and (max-width: 959px) {
     .d-grid {
         grid-template-columns: repeat(1, 1fr) !important;
@@ -20,7 +32,15 @@ html {
 
 /* Global font sizes can't be set through the Vuetify configuration. */
 .v-theme--CompactTheme {
-    font-size: 0.85rem;
+    font-size: 0.75rem;
+
+    &.v-btn--variant-elevated.bg-primary {
+        box-shadow: none !important;
+        background-color: transparent !important;
+        color: green !important;
+        border: solid 1px lightgrey;
+        border-radius: 4px;
+    }
 
     .v-card-title,
     .v-list-item-title,
@@ -29,7 +49,22 @@ html {
     }
 
     .v-btn {
-        min-width: 0px;
-        padding: 0 8px;
+        min-width: 0px !important;
+        padding: 5px 5px !important;
+        box-shadow: none !important;
+    }
+
+    .v-btn__content {
+        text-transform: none;
+    }
+
+    .v-label {
+        font-size: 0.75rem;
+    }
+
+    .v-tab {
+        height: 30px !important;
+        min-width: fit-content !important;
+        padding: 10px !important;
     }
 }

nova/trame/view/theme/assets/vuetify_config.json

@@ -152,14 +152,11 @@
                     "secondary": "#f48e5c"
                 },
                 "defaults": {
-                    "global": {
-                        "density": "compact"
-                    },
                     "VBadge": {
                         "dot": true
                     },
                     "VBtn": {
-                        "density": "default"
+                        "size": "small"
                     },
                     "VTextField": {
                         "VBtn": {
@@ -172,9 +169,13 @@
             }
         },
         "variations": {
-            "colors": ["primary", "secondary", "accent"],
+            "colors": [
+                "primary",
+                "secondary",
+                "accent"
+            ],
             "darken": 5,
             "lighten": 5
         }
     }
-}
+}

{nova_trame-0.15.0.dist-info → nova_trame-0.16.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: nova-trame
-Version: 0.15.0
+Version: 0.16.0
 Summary: A Python Package for injecting curated themes and custom components into Trame applications
 License: MIT
 Keywords: NDIP,Python,Trame,Vuetify
@@ -13,12 +13,16 @@ Classifier: Programming Language :: Python :: 3.10
 Classifier: Programming Language :: Python :: 3.11
 Classifier: Programming Language :: Python :: 3.12
 Classifier: Programming Language :: Python :: 3.13
+Requires-Dist: altair
 Requires-Dist: libsass
 Requires-Dist: mergedeep
 Requires-Dist: nova-mvvm
 Requires-Dist: pydantic
 Requires-Dist: tomli
+Requires-Dist: tornado
 Requires-Dist: trame
+Requires-Dist: trame-matplotlib
+Requires-Dist: trame-plotly
 Requires-Dist: trame-vega
 Requires-Dist: trame-vuetify
 Description-Content-Type: text/markdown

{nova_trame-0.15.0.dist-info → nova_trame-0.16.0.dist-info}/RECORD

@@ -4,24 +4,25 @@ nova/trame/model/remote_file_input.py,sha256=9KAf31ZHzpsh_aXUrNcF81Q5jvUZDWCzW1Q
 nova/trame/view/components/__init__.py,sha256=fopr6mVqcpDcVYK9ue7SLUHyswgvRPcFESTq86mu1R8,128
 nova/trame/view/components/input_field.py,sha256=8q18MyegDl0ni2Wpb6TwvTJ4UYoKSNINq9TilE5EnbE,14956
 nova/trame/view/components/remote_file_input.py,sha256=k2yrwkell_g0sGnWR9XLL1LxkmFLr8-AGhduo8E-N4A,8669
-nova/trame/view/components/visualization/__init__.py,sha256=kDX1fkbtAgXSGlqhlMNhYYoYrq-hfS636smjgLsh6gg,84
+nova/trame/view/components/visualization/__init__.py,sha256=reqkkbhD5uSksHHlhVMy1qNUCwSekS5HlXk6wCREYxU,152
 nova/trame/view/components/visualization/interactive_2d_plot.py,sha256=foZCMoqbuahT5dtqIQvm8C4ZJcY9P211eJEcpQJltmM,3421
+nova/trame/view/components/visualization/matplotlib_figure.py,sha256=yop7Kd_MylUiCwEial2jOYESbvchrYhrpSmRowUhePY,12003
 nova/trame/view/layouts/__init__.py,sha256=cMrlB5YMUoK8EGB83b34UU0kPTVrH8AxsYvKRtpUNEc,141
 nova/trame/view/layouts/grid.py,sha256=k-QHuH31XeAVDuMKUMoAMVnAM-Yavq7kdLYOC1ZrGTQ,5021
 nova/trame/view/layouts/hbox.py,sha256=r5irhFX6YWTWN4V4NwNQx6mheyM8p6PVcJbrbhvOAwo,2625
 nova/trame/view/layouts/vbox.py,sha256=Q4EvrtGJORyNF6AnCLGXToy8XU6yofiO5_kt7hK-AYs,2626
 nova/trame/view/theme/__init__.py,sha256=70_marDlTigIcPEOGiJb2JTs-8b2sGM5SlY7XBPtBDM,54
-nova/trame/view/theme/assets/core_style.scss,sha256=vr5L55sKj-eWeom4NaO3sYKtPgtM5O-KlYk1k15uI3Q,586
+nova/trame/view/theme/assets/core_style.scss,sha256=_RUO_WnxsteRXftfLQiql0TLh_9Vx93bxLeUBu8Xp3M,1284
 nova/trame/view/theme/assets/favicon.png,sha256=Xbp1nUmhcBDeObjsebEbEAraPDZ_M163M_ZLtm5AbQc,1927
 nova/trame/view/theme/assets/js/delay_manager.js,sha256=vmb34DZ5YCQIlRW9Tf2M_uvJW6HFCmtlKZ5e_TPR8yg,536
 nova/trame/view/theme/assets/js/lodash.debounce.min.js,sha256=GLzlQH04WDUNYN7i39ttHHejSdu-CpAvfWgDgKDn-OY,4448
 nova/trame/view/theme/assets/js/lodash.throttle.min.js,sha256=9csqjX-M-LVGJnF3z4ha1R_36O5AfkFE8rPHkxmt3tE,4677
-nova/trame/view/theme/assets/vuetify_config.json,sha256=7WGV6rO7hv2sapGsX9yy1d-dINshYFXRNX99D9I3dKQ,4780
+nova/trame/view/theme/assets/vuetify_config.json,sha256=SQOPcwuAYTgYfkhyC1eB1TA8VtnMWZe7-P2ItJkOrX0,4736
 nova/trame/view/theme/theme.py,sha256=18tHChrB1_qosjIiiLxMwWYRDTdXfgxEP4-4yJ8E3Cw,11893
 nova/trame/view/utilities/local_storage.py,sha256=vD8f2VZIpxhIKjZwEaD7siiPCTZO4cw9AfhwdawwYLY,3218
 nova/trame/view_model/remote_file_input.py,sha256=WHWCQkZBGeKLe1aTPbtVNI8tn-PDt64mi1-561uuBpQ,3320
-nova_trame-0.15.0.dist-info/LICENSE,sha256=Iu5QiDbwNbREg75iYaxIJ_V-zppuv4QFuBhAW-qiAlM,1061
-nova_trame-0.15.0.dist-info/METADATA,sha256=Acdlyzs80ZpAlhUnCw5iFfw7N2zgGRu7B1eR1g9ZLlI,1240
-nova_trame-0.15.0.dist-info/WHEEL,sha256=XbeZDeTWKc1w7CSIyre5aMDU_-PohRwTQceYnisIYYY,88
-nova_trame-0.15.0.dist-info/entry_points.txt,sha256=J2AmeSwiTYZ4ZqHHp9HO6v4MaYQTTBPbNh6WtoqOT58,42
-nova_trame-0.15.0.dist-info/RECORD,,
+nova_trame-0.16.0.dist-info/LICENSE,sha256=Iu5QiDbwNbREg75iYaxIJ_V-zppuv4QFuBhAW-qiAlM,1061
+nova_trame-0.16.0.dist-info/METADATA,sha256=-lnKJubLE96B49GZ567TOGxbxeNwqYX_R9KLaBo0FuY,1345
+nova_trame-0.16.0.dist-info/WHEEL,sha256=fGIA9gx4Qxk2KDKeNJCbOEwSrmLtjWCwzBz351GyrPQ,88
+nova_trame-0.16.0.dist-info/entry_points.txt,sha256=J2AmeSwiTYZ4ZqHHp9HO6v4MaYQTTBPbNh6WtoqOT58,42
+nova_trame-0.16.0.dist-info/RECORD,,

{nova_trame-0.15.0.dist-info → nova_trame-0.16.0.dist-info}/WHEEL

@@ -1,4 +1,4 @@
 Wheel-Version: 1.0
-Generator: poetry-core 2.1.1
+Generator: poetry-core 2.1.2
 Root-Is-Purelib: true
 Tag: py3-none-any