Plot looks stretched

[MarcSkovMadsen]

import hvplot.pandas  # noqa: F401
import numpy as np
import pandas as pd
import panel as pn

from panel_reactflow import ReactFlow

pn.extension("jsoneditor")

data = pd.DataFrame({"x": range(50), "y": np.random.randn(50).cumsum()})
plot = data.hvplot.line(x="x", y="y", height=300, width=400)


nodes = [
    {
        "id": "source",
        "type": "panel",
        "label": "Data Source",
        "position": {"x": 0, "y": 0},
        "data": {},
        "view": pn.panel(plot),
    },
]

ReactFlow(nodes=nodes, edges=[], sizing_mode="stretch_both").servable()

My browser is at 100%. The axis labels look stretched. The text is pixelated.

[MarcSkovMadsen]

Maybe its because I've previously zoomed on the react flow canvas and that is stored somewhere?

[MarcSkovMadsen]

Same problem with this example

"""Example 3: Stock Analysis DAG — fan-out and fan-in with a diamond topology."""

import hvplot.pandas  # noqa: F401
import numpy as np
import pandas as pd
import panel as pn
import param
from panel.viewable import Viewer

from panel_reactflow import EdgeSpec, NodeSpec, ReactFlow

pn.extension("jsoneditor")


class TickerNode(Viewer):
    symbol = param.String(default="AAPL")
    days = param.Integer(default=252, bounds=(30, 1000))
    prices = param.DataFrame()

    @param.depends("symbol", "days", watch=True, on_init=True)
    def _generate(self):
        np.random.seed(hash(self.symbol) % 2**32)
        dates = pd.date_range(end=pd.Timestamp.now(), periods=self.days)
        price = 100 + np.cumsum(np.random.randn(self.days) * 1.5)
        self.prices = pd.DataFrame({"date": dates, "price": price}).set_index("date")

    def __panel__(self):
        return pn.Column(
            pn.widgets.TextInput.from_param(self.param.symbol, name="Ticker"),
            pn.widgets.IntSlider.from_param(self.param.days, name="Days"),
        )


class MANode(Viewer):
    prices = param.DataFrame()
    window = param.Integer(default=20, bounds=(5, 100))
    ma_data = param.DataFrame()

    @param.depends("prices", "window", watch=True)
    def _compute(self):
        if self.prices is None:
            return
        df = self.prices.copy()
        df["ma"] = df["price"].rolling(self.window).mean()
        self.ma_data = df

    @param.depends("ma_data")
    def preview(self):
        if self.ma_data is None:
            return pn.pane.Markdown("*Waiting...*")
        last_ma = self.ma_data["ma"].dropna().iloc[-1] if len(self.ma_data) else 0
        return pn.pane.Markdown(f"MA({self.window}): **{last_ma:.2f}**")

    def __panel__(self):
        return pn.Column(
            pn.widgets.IntSlider.from_param(self.param.window, name="Window"),
            self.preview,
        )


class RSINode(Viewer):
    prices = param.DataFrame()
    period = param.Integer(default=14, bounds=(2, 50))
    rsi_data = param.DataFrame()

    @param.depends("prices", "period", watch=True)
    def _compute(self):
        if self.prices is None:
            return
        delta = self.prices["price"].diff()
        gain = delta.clip(lower=0).rolling(self.period).mean()
        loss = (-delta.clip(upper=0)).rolling(self.period).mean()
        rs = gain / loss
        df = self.prices.copy()
        df["rsi"] = 100 - (100 / (1 + rs))
        self.rsi_data = df

    @param.depends("rsi_data")
    def preview(self):
        if self.rsi_data is None:
            return pn.pane.Markdown("*Waiting...*")
        last_rsi = self.rsi_data["rsi"].dropna().iloc[-1] if len(self.rsi_data) else 0
        return pn.pane.Markdown(f"RSI({self.period}): **{last_rsi:.1f}**")

    def __panel__(self):
        return pn.Column(
            pn.widgets.IntSlider.from_param(self.param.period, name="Period"),
            self.preview,
        )


class ChartNode(Viewer):
    ma_data = param.DataFrame()
    rsi_data = param.DataFrame()

    @param.depends("ma_data", "rsi_data")
    def plot(self):
        if self.ma_data is None or self.rsi_data is None:
            return pn.pane.Markdown("*Waiting for data from both branches...*")
        price_plot = self.ma_data.hvplot.line(
            y=["price", "ma"],
            ylabel="Price",
            title="Price & Moving Average",
            legend="top_left",
            height=200,
        )
        rsi_plot = self.rsi_data.hvplot.line(
            y="rsi",
            ylabel="RSI",
            title="RSI",
            color="orange",
            height=150,
        )
        return pn.Column(price_plot, rsi_plot, sizing_mode="stretch_width")

    def __panel__(self):
        return pn.panel(self.plot, width=400, height=380)


# Create instances
ticker = TickerNode()
ma = MANode()
rsi = RSINode()
chart = ChartNode()

# Wire the DAG: Ticker -> {MA, RSI} -> Chart
ticker.param.watch(lambda e: setattr(ma, "prices", e.new), "prices")
ticker.param.watch(lambda e: setattr(rsi, "prices", e.new), "prices")
ma.param.watch(lambda e: setattr(chart, "ma_data", e.new), "ma_data")
rsi.param.watch(lambda e: setattr(chart, "rsi_data", e.new), "rsi_data")

# Build the ReactFlow graph with diamond layout
flow = ReactFlow(
    nodes=[
        NodeSpec(id="ticker", position={"x": 0, "y": 150}, label="Ticker Input").to_dict() | {"view": ticker.__panel__()},
        NodeSpec(id="ma", position={"x": 450, "y": 0}, label="Moving Average").to_dict() | {"view": ma.__panel__()},
        NodeSpec(id="rsi", position={"x": 450, "y": 300}, label="RSI").to_dict() | {"view": rsi.__panel__()},
        NodeSpec(id="chart", position={"x": 850, "y": 100}, label="Combined Chart").to_dict() | {"view": chart.__panel__()},
    ],
    edges=[
        EdgeSpec(id="e1", source="ticker", target="ma", label="prices").to_dict(),
        EdgeSpec(id="e2", source="ticker", target="rsi", label="prices").to_dict(),
        EdgeSpec(id="e3", source="ma", target="chart", label="ma_data").to_dict(),
        EdgeSpec(id="e4", source="rsi", target="chart", label="rsi_data").to_dict(),
    ],
    sizing_mode="stretch_both",
    min_height=600,
    editable=False,  # Disable interactions for demo purposes
)
flow.servable()

Drag the days slider

[philippjfr]

Improved this a fair bit but the main problem is that reactflow applies scaling to things laid out in the graph via CSS transforms but Bokeh plots absolutely do not like this. I've sort of patched this now by applying the inverse scaling factor to the Bokeh figures, which sort of works but has various quirks such as a brief flicker and sometimes the scaling factor goes out of sync (I suspect because the canvas is completely re-rendered sometimes).