Port highlighting during drag: dim incompatible, highlight compatible

[philippjfr]

Summary

When a user starts dragging a connection from a port on the ReactFlow canvas, visually indicate which target ports are compatible and which are not. Compatible ports should be highlighted and incompatible ports should be dimmed, giving immediate feedback before the connection is attempted.

Current behavior

• All ports look the same during a drag operation.
• Users only discover whether a connection is valid after dropping the edge, at which point a success notification or error toast appears.
• The compatibility logic already exists in DataflowGraph._check_type_compatibility (src/panel_flowdash/dataflow_engine.py:186) and the validation checks in add_edge (type matching, cycle detection, already-connected inputs).

Proposed behavior

• When the user begins dragging from a source (output) port:
  • Highlight all input ports on other nodes that are type-compatible, not already connected, and would not create a cycle.
  • Dim all ports that are incompatible (type mismatch, already occupied, or would create a cycle).
• When the user begins dragging from a target (input) port:
  • Apply the same logic in reverse for output ports.
• When the drag ends (drop or cancel), reset all ports to their default appearance.

Implementation notes

• Port type information is available in ComponentSpec.inputs and ComponentSpec.outputs (src/panel_flowdash/component_spec.py). Each port has an optional type field; ports with type=None are compatible with anything.
• The _check_type_compatibility method performs case-insensitive string matching on type names.
• Cycle detection uses _would_create_cycle which does a BFS from the target node.
• Already-connected validation checks if the target port already has an incoming edge.
• This will likely require handling a connectStart / drag-start event from panel-reactflow to identify the source port and compute the compatible set, then applying CSS classes or inline styles to port handles. Check what events pr.ReactFlow currently exposes, and whether custom onConnectStart/onConnectEnd callbacks can be wired up.
• The styling already targets .react-flow__handle in the flow canvas stylesheets (app.py:295), so adding .compatible / .dimmed modifier classes should slot in naturally.

Acceptance criteria

• Dragging from an output port highlights compatible input ports and dims incompatible ones
• Dragging from an input port highlights compatible output ports and dims incompatible ones
• Ports with no declared type remain highlighted (they accept anything)
• Already-connected input ports are dimmed
• Connections that would create a cycle are dimmed
• Port appearance resets when drag ends
• No change to connection validation logic (existing behavior preserved)