- Bulbous top section (overflow zone) with curved sides
- Straight middle section (healthy operating zone between min/max)
- Angled/tapered bottom section narrowing to spout (outcomes)
- Side handles positioned at overflow zone for funnel-to-funnel flows
- Bottom handle at narrow spout for outcome/deliverable flows
- Animated overflow arrows when overflowing
- Threshold lines with MIN/MAX labels
- Fluid fill with ripple effect animation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Edit modal now includes:
- + button next to "Outflows" to create new funnel node
- + button next to "Outcomes" to create new outcome node
- Hover X button to remove allocations
- Auto-redistribute percentages when adding/removing
- New nodes positioned relative to current funnel
Uses useReactFlow hook to dynamically add nodes to canvas.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Flow architecture:
- INFLOWS enter from TOP (emerald handles)
- OUTFLOWS leave from SIDES to other funnels (amber handles)
- OUTCOMES/DELIVERABLES flow from BOTTOM (blue handles)
Simplified default view:
- Clean funnel shape with liquid fill animation
- Compact value display
- Simple allocation bars (Out/Spend)
- Status badge (OK/LOW/OVER)
Double-click edit modal:
- Draggable MIN/MAX threshold handles on single line
- Current value indicator
- Draggable pie chart slices for allocation editing
- Outflows pie (to funnels) and Spending pie (to outcomes)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Overflow allocations now flow SIDEWAYS to other funnels (amber)
- Spending allocations flow DOWN to outcome nodes (blue/pink)
- Added OutcomeNode component for deliverables/outputs
- Double-click funnels to open edit modal for min/max thresholds
- Separate pie chart for spending, bar chart for overflow
- Particle animations show overflow flying sideways, spending dripping down
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- All nodes now use single FunnelNode type
- Dual-handle range slider for min/max on one line
- Min cannot exceed max (constrained)
- Pie chart showing outflow allocations
- Edge thickness proportional to allocation percentage
- Removed old SourceNode, RecipientNode, ThresholdNode
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Jeff Emmett