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