Add ReactFlow-style view using Cytoscape.js

[Copilot]

Adds a third visualization mode for org charts using Cytoscape.js as a vanilla JS alternative to ReactFlow.

Changes

• New ReactFlowView component - Hierarchical flow chart with directed edges using Cytoscape.js breadthfirst layout
• Three-view cycling - Extended toggle button: Hierarchy → Force Graph → ReactFlow → Hierarchy
• Fixed container ID references - Now uses instance-specific IDs (ychart-chart-${instanceId})
• Dependencies - Added cytoscape and @types/cytoscape

Usage

Enable with experimental flag:

const editor = new YChartEditor({
  experimental: true  // Shows view toggle button in toolbar
});

Views cycle on button click, each maintaining node click handlers and supporting zoom/pan interactions.

Screenshots

Hierarchical Org Chart (default)

Force-Directed Graph

ReactFlow View (Cytoscape)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Reactflow view</issue_title>
<issue_description>It would be good to make an alternate view that uses reactflow to visualize the orgchart instead of d3</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Reactflow view #4

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.