No way to make plot not overflow

[MarcSkovMadsen]

I simply cannot figure out how to make plot not overflow in below example. Please make it easy for users to use dynamic plots.

"""Example 2: Data Explorer Pipeline — DataFrames flowing between nodes with an hvPlot scatter chart."""

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")

# Generate sample datasets (no external dependencies needed)
DATASETS = {
    "iris": pd.DataFrame(
        {
            "sepal_length": np.random.normal(5.8, 0.8, 150),
            "sepal_width": np.random.normal(3.0, 0.4, 150),
            "petal_length": np.random.normal(3.7, 1.8, 150),
            "petal_width": np.random.normal(1.2, 0.8, 150),
        }
    ),
    "random": pd.DataFrame(
        {
            "x": np.random.randn(200),
            "y": np.random.randn(200),
            "size": np.random.uniform(1, 10, 200),
            "value": np.random.uniform(0, 100, 200),
        }
    ),
}


class DataLoaderNode(Viewer):
    dataset = param.Selector(default="iris", objects=list(DATASETS.keys()))
    data = param.DataFrame()

    @param.depends("dataset", watch=True, on_init=True)
    def _load(self):
        self.data = DATASETS[self.dataset]

    def __panel__(self):
        info = pn.bind(
            lambda d: f"**{len(d)} rows, {len(d.columns)} cols**" if d is not None else "",
            self.param.data,
        )
        return pn.Column(
            pn.widgets.Select.from_param(self.param.dataset, name="Dataset"),
            info,
        )


class ColumnFilterNode(Viewer):
    data = param.DataFrame()
    x_col = param.Selector(default="")
    y_col = param.Selector(default="")

    @param.depends("data", watch=True)
    def _update_columns(self):
        if self.data is not None:
            cols = list(self.data.select_dtypes("number").columns)
            self.param.x_col.objects = cols
            self.param.y_col.objects = cols
            if cols:
                self.x_col = cols[0]
                self.y_col = cols[min(1, len(cols) - 1)]

    def __panel__(self):
        return pn.Column(
            pn.widgets.Select.from_param(self.param.x_col, name="X Column"),
            pn.widgets.Select.from_param(self.param.y_col, name="Y Column"),
        )


class ChartNode(Viewer):
    data = param.DataFrame()
    x_col = param.String(default="")
    y_col = param.String(default="")

    @param.depends("data", "x_col", "y_col")
    def plot(self):
        if self.data is None or not self.x_col or not self.y_col:
            return pn.pane.Markdown("*Waiting for data...*")
        return self.data.hvplot.scatter(x=self.x_col, y=self.y_col, responsive=True)

    def __panel__(self):
        return pn.panel(self.plot, width=500, height=400, sizing_mode="fixed", styles={"border": "1px solid #ddd", "padding": "10px", "box-sizing": "border-box"})


# Create instances and wire them
loader = DataLoaderNode()
filter_node = ColumnFilterNode()
chart = ChartNode()

loader.param.watch(lambda e: setattr(filter_node, "data", e.new), "data")
filter_node.param.watch(lambda e: setattr(chart, "x_col", e.new), "x_col")
filter_node.param.watch(lambda e: setattr(chart, "y_col", e.new), "y_col")
filter_node.param.watch(lambda e: setattr(chart, "data", e.new), "data")

# Build graph
flow = ReactFlow(
    nodes=[
        NodeSpec(id="loader", position={"x": 0, "y": 80}, label="Data Loader").to_dict() | {"view": loader.__panel__()},
        NodeSpec(id="filter", position={"x": 400, "y": 50}, label="Column Filter").to_dict() | {"view": filter_node.__panel__()},
        NodeSpec(id="chart", position={"x": 850, "y": 0}, label="Scatter Chart").to_dict() | {"view": chart.__panel__()},
    ],
    edges=[
        EdgeSpec(id="e1", source="loader", target="filter", label="DataFrame").to_dict(),
        EdgeSpec(id="e2", source="filter", target="chart", label="columns + data").to_dict(),
    ],
    sizing_mode="stretch_both",
)
flow.servable()

In the dropdown select "random"

I've tried all imaginable combinations of width, height and sizing_mode in ChartNode.

[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