Skip to content

No way to hide port #24

@MarcSkovMadsen

Description

@MarcSkovMadsen

Empty handle list [] still renders a default handle

Description

Setting inputs=[] or outputs=[] on a NodeType should hide handles on that side, but a default unnamed handle is rendered instead. There is no way to declare that a node has no input or no output handles.

Root Cause

In src/panel_reactflow/models/reactflow.jsx, the renderHandles function (line 27-35) uses:

if (!handles?.length) {
  return <Handle ... />;  // default handle
}

!handles?.length is falsy for both null/undefined (no handles specified) and [] (explicitly empty). Both cases render a default handle. The function cannot distinguish "not specified" from "explicitly none".

Minimal Reproducible Example

import panel as pn
from panel_reactflow import ReactFlow, NodeSpec, EdgeSpec, NodeType

pn.extension("jsoneditor")

# Define node types: "source" has no input handles, "sink" has no output handles
node_types = {
    "source": NodeType(type="source", label="Source", inputs=[], outputs=["out"]),
    "sink": NodeType(type="sink", label="Sink", inputs=["in"], outputs=[]),
}

flow = ReactFlow(
    nodes=[
        NodeSpec(id="a", type="source", position={"x": 0, "y": 0}, label="Source").to_dict(),
        NodeSpec(id="b", type="sink", position={"x": 400, "y": 0}, label="Sink").to_dict(),
    ],
    edges=[
        EdgeSpec(id="e1", source="a", target="b").to_dict(),
    ],
    node_types=node_types,
    sizing_mode="stretch_both",
    min_height=300,
)
flow.servable()
Image

Expected: "Source" node has no left (input) handle. "Sink" node has no right (output) handle.

Actual: Both nodes show handles on both sides.

Suggested Fix

Add an early return for explicitly empty arrays before the default-handle fallback:

function renderHandles(direction, handles) {
  if (Array.isArray(handles) && handles.length === 0) {
    return null;  // explicitly empty → no handles
  }
  if (!handles?.length) {
    return <Handle ... />;  // null/undefined → default handle
  }
  // named handles ...
}

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions