feat: add Budget River waterfall visualization view
New /river page showing funding flows as an animated river with waterfalls cascading in (inflows) and out (spending). SVG-based with CSS animations for water effects, ripples, and current lines. Supports demo mode with simulated data and live mode via Safe Global API for real on-chain balances. Also includes source node type and landing page nav links. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
cff46bb0fc
commit
e683175c65
|
|
@ -25,3 +25,43 @@ body {
|
|||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Budget River Animations ─────────────────────────── */
|
||||
|
||||
@keyframes waterFlow {
|
||||
0% { transform: translateY(-100%); }
|
||||
100% { transform: translateY(100%); }
|
||||
}
|
||||
|
||||
@keyframes riverCurrent {
|
||||
0% { stroke-dashoffset: 0; }
|
||||
100% { stroke-dashoffset: -24; }
|
||||
}
|
||||
|
||||
@keyframes droplet {
|
||||
0% { transform: translateY(0) scale(1); opacity: 0.8; }
|
||||
80% { opacity: 0.4; }
|
||||
100% { transform: translateY(50px) scale(0.2); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% { r: 2; opacity: 0.6; }
|
||||
100% { r: 14; opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes waveFloat {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-3px); }
|
||||
}
|
||||
|
||||
@keyframes poolWave {
|
||||
0% { d: path("M0,8 Q15,4 30,8 T60,8 T90,8 V20 H0 Z"); }
|
||||
50% { d: path("M0,8 Q15,12 30,8 T60,8 T90,8 V20 H0 Z"); }
|
||||
100% { d: path("M0,8 Q15,4 30,8 T60,8 T90,8 V20 H0 Z"); }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { opacity: 0.3; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 0.3; }
|
||||
}
|
||||
|
|
|
|||
12
app/page.tsx
12
app/page.tsx
|
|
@ -20,6 +20,12 @@ export default function Home() {
|
|||
>
|
||||
Demo
|
||||
</Link>
|
||||
<Link
|
||||
href="/river"
|
||||
className="text-sm text-slate-300 hover:text-white transition-colors"
|
||||
>
|
||||
River View
|
||||
</Link>
|
||||
<Link
|
||||
href="/space"
|
||||
className="text-sm px-4 py-2 bg-emerald-600 hover:bg-emerald-500 rounded-lg transition-colors font-medium"
|
||||
|
|
@ -48,6 +54,12 @@ export default function Home() {
|
|||
>
|
||||
Try the Demo
|
||||
</Link>
|
||||
<Link
|
||||
href="/river"
|
||||
className="px-6 py-3 bg-cyan-700 hover:bg-cyan-600 rounded-xl text-lg font-medium transition-all border border-cyan-600"
|
||||
>
|
||||
River View
|
||||
</Link>
|
||||
<Link
|
||||
href="/space"
|
||||
className="px-6 py-3 bg-emerald-600 hover:bg-emerald-500 rounded-xl text-lg font-medium transition-all shadow-lg shadow-emerald-900/30"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,350 @@
|
|||
'use client'
|
||||
|
||||
import dynamic from 'next/dynamic'
|
||||
import Link from 'next/link'
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
import { demoNodes } from '@/lib/presets'
|
||||
import { detectSafeChains, getBalances } from '@/lib/api/safe-client'
|
||||
import { safeBalancesToFunnels } from '@/lib/integrations'
|
||||
import { getFlow, listFlows, syncNodesToBackend, fromSmallestUnit } from '@/lib/api/flows-client'
|
||||
import type { FlowNode, FunnelNodeData } from '@/lib/types'
|
||||
import type { BackendFlow } from '@/lib/api/flows-client'
|
||||
|
||||
const BudgetRiver = dynamic(() => import('@/components/BudgetRiver'), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="w-full h-full flex items-center justify-center bg-slate-900">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 border-4 border-cyan-500 border-t-transparent rounded-full animate-spin" />
|
||||
<span className="text-slate-400">Loading river view...</span>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
})
|
||||
|
||||
export default function RiverPage() {
|
||||
const [mode, setMode] = useState<'demo' | 'live'>('demo')
|
||||
const [nodes, setNodes] = useState<FlowNode[]>(demoNodes)
|
||||
const [isSimulating, setIsSimulating] = useState(true)
|
||||
const [showConnect, setShowConnect] = useState(false)
|
||||
const [safeAddress, setSafeAddress] = useState('')
|
||||
const [connecting, setConnecting] = useState(false)
|
||||
const [connectedChains, setConnectedChains] = useState<string[]>([])
|
||||
const [statusMessage, setStatusMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null)
|
||||
const [deployedFlow, setDeployedFlow] = useState<BackendFlow | null>(null)
|
||||
|
||||
// Load saved address
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
const saved = localStorage.getItem('rfunds-owner-address')
|
||||
if (saved) setSafeAddress(saved)
|
||||
}, [])
|
||||
|
||||
const showStatus = useCallback((text: string, type: 'success' | 'error') => {
|
||||
setStatusMessage({ text, type })
|
||||
setTimeout(() => setStatusMessage(null), 4000)
|
||||
}, [])
|
||||
|
||||
const handleConnect = useCallback(async () => {
|
||||
if (!safeAddress.trim()) return
|
||||
setConnecting(true)
|
||||
try {
|
||||
localStorage.setItem('rfunds-owner-address', safeAddress.trim())
|
||||
const detected = await detectSafeChains(safeAddress.trim())
|
||||
if (detected.length === 0) {
|
||||
showStatus('No Safe found on supported chains (Gnosis, Optimism)', 'error')
|
||||
setConnecting(false)
|
||||
return
|
||||
}
|
||||
|
||||
const chainNames = detected.map(d => d.chain.name)
|
||||
setConnectedChains(chainNames)
|
||||
|
||||
// Fetch balances from all detected chains and create funnel nodes
|
||||
const allFunnelNodes: FlowNode[] = []
|
||||
for (const chain of detected) {
|
||||
const balances = await getBalances(safeAddress.trim(), chain.chainId)
|
||||
const funnels = safeBalancesToFunnels(
|
||||
balances,
|
||||
safeAddress.trim(),
|
||||
chain.chainId,
|
||||
{ x: allFunnelNodes.length * 280, y: 100 }
|
||||
)
|
||||
allFunnelNodes.push(...funnels)
|
||||
}
|
||||
|
||||
if (allFunnelNodes.length === 0) {
|
||||
showStatus('Safe found but no token balances > $1', 'error')
|
||||
setConnecting(false)
|
||||
return
|
||||
}
|
||||
|
||||
setNodes(allFunnelNodes)
|
||||
setMode('live')
|
||||
setIsSimulating(false)
|
||||
setShowConnect(false)
|
||||
showStatus(`Connected: ${allFunnelNodes.length} tokens across ${chainNames.join(', ')}`, 'success')
|
||||
} catch (err) {
|
||||
showStatus(`Connection failed: ${err instanceof Error ? err.message : 'Unknown error'}`, 'error')
|
||||
} finally {
|
||||
setConnecting(false)
|
||||
}
|
||||
}, [safeAddress, showStatus])
|
||||
|
||||
const handleLoadFlow = useCallback(async () => {
|
||||
if (!safeAddress.trim()) {
|
||||
showStatus('Enter a wallet address first', 'error')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const flows = await listFlows(safeAddress.trim())
|
||||
if (flows.length === 0) {
|
||||
showStatus('No deployed flows found for this address', 'error')
|
||||
return
|
||||
}
|
||||
|
||||
// Load the most recent active flow
|
||||
const activeFlow = flows.find(f => f.status === 'active') || flows[0]
|
||||
const flow = await getFlow(activeFlow.id)
|
||||
setDeployedFlow(flow)
|
||||
|
||||
// Convert backend flow to visual nodes
|
||||
const funnelNodes: FlowNode[] = flow.funnels.map((f, i) => ({
|
||||
id: f.id,
|
||||
type: 'funnel' as const,
|
||||
position: { x: i * 280, y: 100 },
|
||||
data: {
|
||||
label: f.name,
|
||||
currentValue: fromSmallestUnit(f.balance),
|
||||
minThreshold: fromSmallestUnit(f.minThreshold),
|
||||
maxThreshold: fromSmallestUnit(f.maxThreshold),
|
||||
maxCapacity: fromSmallestUnit(f.maxThreshold) * 1.5,
|
||||
inflowRate: f.inflowRate ? fromSmallestUnit(f.inflowRate) : 0,
|
||||
overflowAllocations: f.overflowAllocations.map((a, j) => ({
|
||||
targetId: a.targetId,
|
||||
percentage: a.percentage,
|
||||
color: ['#f59e0b', '#ef4444', '#f97316'][j % 3],
|
||||
})),
|
||||
spendingAllocations: f.spendingAllocations.map((a, j) => ({
|
||||
targetId: a.targetId,
|
||||
percentage: a.percentage,
|
||||
color: ['#3b82f6', '#8b5cf6', '#ec4899'][j % 3],
|
||||
})),
|
||||
} as FunnelNodeData,
|
||||
}))
|
||||
|
||||
const outcomeNodes: FlowNode[] = flow.outcomes.map((o, i) => ({
|
||||
id: o.id,
|
||||
type: 'outcome' as const,
|
||||
position: { x: i * 250, y: 600 },
|
||||
data: {
|
||||
label: o.name,
|
||||
description: o.description || '',
|
||||
fundingReceived: fromSmallestUnit(o.currentAmount),
|
||||
fundingTarget: fromSmallestUnit(o.targetAmount),
|
||||
status: o.status === 'completed' ? 'completed' as const :
|
||||
fromSmallestUnit(o.currentAmount) > 0 ? 'in-progress' as const : 'not-started' as const,
|
||||
},
|
||||
}))
|
||||
|
||||
setNodes([...funnelNodes, ...outcomeNodes])
|
||||
setMode('live')
|
||||
setIsSimulating(false)
|
||||
showStatus(`Loaded flow "${flow.name}" (${flow.funnels.length} funnels, ${flow.outcomes.length} outcomes)`, 'success')
|
||||
} catch (err) {
|
||||
showStatus(`Failed to load flow: ${err instanceof Error ? err.message : 'Unknown error'}`, 'error')
|
||||
}
|
||||
}, [safeAddress, showStatus])
|
||||
|
||||
// Auto-refresh in live mode
|
||||
useEffect(() => {
|
||||
if (mode !== 'live' || !deployedFlow) return
|
||||
|
||||
const interval = setInterval(async () => {
|
||||
try {
|
||||
const latest = await getFlow(deployedFlow.id)
|
||||
setDeployedFlow(latest)
|
||||
setNodes(prev => syncNodesToBackend(prev, latest, Object.fromEntries(
|
||||
prev.map(n => [n.id, n.id])
|
||||
)))
|
||||
} catch {
|
||||
// Silent refresh failure
|
||||
}
|
||||
}, 30000)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [mode, deployedFlow])
|
||||
|
||||
const handleSwitchToDemo = useCallback(() => {
|
||||
setNodes(demoNodes)
|
||||
setMode('demo')
|
||||
setIsSimulating(true)
|
||||
setDeployedFlow(null)
|
||||
setConnectedChains([])
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<main className="h-screen w-screen flex flex-col bg-slate-900">
|
||||
{/* Status Toast */}
|
||||
{statusMessage && (
|
||||
<div className={`fixed top-16 left-1/2 -translate-x-1/2 z-[60] px-4 py-2 rounded-lg shadow-lg text-sm font-medium ${
|
||||
statusMessage.type === 'success' ? 'bg-emerald-600 text-white' : 'bg-red-600 text-white'
|
||||
}`}>
|
||||
{statusMessage.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Banner */}
|
||||
<div className="bg-slate-800 text-white px-4 py-2 flex items-center justify-between text-sm flex-shrink-0 border-b border-slate-700/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<div className="w-6 h-6 bg-gradient-to-br from-amber-400 to-emerald-500 rounded flex items-center justify-center font-bold text-slate-900 text-[10px]">
|
||||
rF
|
||||
</div>
|
||||
<span className="font-medium">rFunds</span>
|
||||
</Link>
|
||||
<span className="text-slate-500">|</span>
|
||||
<span className="text-cyan-300 font-medium">Budget River</span>
|
||||
{mode === 'live' && connectedChains.length > 0 && (
|
||||
<>
|
||||
<span className="text-slate-500">|</span>
|
||||
<span className="text-xs text-emerald-400">
|
||||
{connectedChains.join(' + ')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{deployedFlow && (
|
||||
<>
|
||||
<span className="text-slate-500">|</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${
|
||||
deployedFlow.status === 'active' ? 'bg-emerald-600/30 text-emerald-300' :
|
||||
'bg-amber-600/30 text-amber-300'
|
||||
}`}>
|
||||
{deployedFlow.status} · {deployedFlow.name}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/tbff"
|
||||
className="px-3 py-1 text-slate-400 hover:text-white text-xs transition-colors"
|
||||
>
|
||||
Canvas View
|
||||
</Link>
|
||||
<Link
|
||||
href="/space"
|
||||
className="px-3 py-1 text-slate-400 hover:text-white text-xs transition-colors"
|
||||
>
|
||||
Editor
|
||||
</Link>
|
||||
|
||||
<div className="w-px h-5 bg-slate-600 mx-1" />
|
||||
|
||||
{mode === 'live' ? (
|
||||
<button
|
||||
onClick={handleSwitchToDemo}
|
||||
className="px-3 py-1 bg-slate-600 hover:bg-slate-500 rounded text-xs font-medium transition-colors"
|
||||
>
|
||||
Demo
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowConnect(true)}
|
||||
className="px-3 py-1 bg-cyan-600 hover:bg-cyan-500 rounded text-xs font-medium transition-colors"
|
||||
>
|
||||
Connect Safe
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => setIsSimulating(!isSimulating)}
|
||||
className={`px-3 py-1 rounded text-xs font-medium transition-colors ${
|
||||
isSimulating
|
||||
? 'bg-emerald-600 hover:bg-emerald-500 text-white'
|
||||
: 'bg-slate-700 hover:bg-slate-600 text-slate-300'
|
||||
}`}
|
||||
>
|
||||
{isSimulating ? 'Pause' : 'Simulate'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* River Canvas */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
<BudgetRiver nodes={nodes} isSimulating={isSimulating} />
|
||||
</div>
|
||||
|
||||
{/* Connect Safe Dialog */}
|
||||
{showConnect && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={() => setShowConnect(false)}>
|
||||
<div className="bg-slate-800 rounded-xl shadow-2xl p-6 w-96 border border-slate-700" onClick={e => e.stopPropagation()}>
|
||||
<h3 className="text-lg font-bold text-white mb-1">Connect Safe Treasury</h3>
|
||||
<p className="text-xs text-slate-400 mb-4">
|
||||
Enter a Safe address to load real token balances from Gnosis and Optimism chains.
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
value={safeAddress}
|
||||
onChange={e => setSafeAddress(e.target.value)}
|
||||
placeholder="Safe address (0x...)"
|
||||
className="w-full px-3 py-2 bg-slate-900 border border-slate-600 rounded-lg text-sm text-white font-mono text-xs mb-3 focus:border-cyan-500 focus:outline-none"
|
||||
autoFocus
|
||||
onKeyDown={e => e.key === 'Enter' && handleConnect()}
|
||||
/>
|
||||
<div className="flex gap-2 mb-3">
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={!safeAddress.trim() || connecting}
|
||||
className="flex-1 px-4 py-2 bg-cyan-600 text-white rounded-lg text-sm font-medium hover:bg-cyan-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{connecting ? 'Connecting...' : 'Connect Safe'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLoadFlow}
|
||||
disabled={!safeAddress.trim()}
|
||||
className="px-4 py-2 bg-violet-600 text-white rounded-lg text-sm font-medium hover:bg-violet-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Load Flow
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowConnect(false)}
|
||||
className="w-full px-4 py-2 text-slate-400 hover:text-white text-sm border border-slate-600 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Legend */}
|
||||
<div className="absolute bottom-4 left-4 bg-slate-800/90 backdrop-blur-sm rounded-lg border border-slate-700/50 p-3 text-xs">
|
||||
<div className="text-[10px] font-medium text-slate-500 uppercase tracking-wide mb-2">Legend</div>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-emerald-500" />
|
||||
<span className="text-slate-400">Source / Inflow</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-1.5 rounded bg-cyan-500" />
|
||||
<span className="text-slate-400">River (healthy)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-1.5 rounded bg-amber-500" />
|
||||
<span className="text-slate-400">Overflow branch</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-violet-500" />
|
||||
<span className="text-slate-400">Spending outflow</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-md border border-blue-500 bg-blue-500/30" />
|
||||
<span className="text-slate-400">Outcome pool</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,970 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useEffect, useMemo, useCallback } from 'react'
|
||||
import type { FlowNode, FunnelNodeData, OutcomeNodeData, SourceNodeData } from '@/lib/types'
|
||||
|
||||
// ─── Layout Types ────────────────────────────────────────
|
||||
|
||||
interface RiverLayout {
|
||||
sources: SourceLayout[]
|
||||
funnels: FunnelLayout[]
|
||||
outcomes: OutcomeLayout[]
|
||||
sourceWaterfalls: WaterfallLayout[]
|
||||
overflowBranches: BranchLayout[]
|
||||
spendingWaterfalls: WaterfallLayout[]
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
interface SourceLayout {
|
||||
id: string
|
||||
label: string
|
||||
flowRate: number
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
}
|
||||
|
||||
interface FunnelLayout {
|
||||
id: string
|
||||
label: string
|
||||
data: FunnelNodeData
|
||||
x: number
|
||||
y: number
|
||||
riverWidth: number
|
||||
segmentLength: number
|
||||
layer: number
|
||||
status: 'healthy' | 'overflow' | 'critical'
|
||||
}
|
||||
|
||||
interface OutcomeLayout {
|
||||
id: string
|
||||
label: string
|
||||
data: OutcomeNodeData
|
||||
x: number
|
||||
y: number
|
||||
poolWidth: number
|
||||
fillPercent: number
|
||||
}
|
||||
|
||||
interface WaterfallLayout {
|
||||
id: string
|
||||
sourceId: string
|
||||
targetId: string
|
||||
label: string
|
||||
percentage: number
|
||||
x: number
|
||||
yStart: number
|
||||
yEnd: number
|
||||
width: number
|
||||
color: string
|
||||
flowAmount: number
|
||||
}
|
||||
|
||||
interface BranchLayout {
|
||||
sourceId: string
|
||||
targetId: string
|
||||
percentage: number
|
||||
x1: number
|
||||
y1: number
|
||||
x2: number
|
||||
y2: number
|
||||
width: number
|
||||
color: string
|
||||
}
|
||||
|
||||
// ─── Constants ───────────────────────────────────────────
|
||||
|
||||
const LAYER_HEIGHT = 160
|
||||
const WATERFALL_HEIGHT = 100
|
||||
const GAP = 40
|
||||
const MIN_RIVER_WIDTH = 24
|
||||
const MAX_RIVER_WIDTH = 100
|
||||
const SEGMENT_LENGTH = 200
|
||||
const POOL_WIDTH = 100
|
||||
const POOL_HEIGHT = 60
|
||||
const SOURCE_HEIGHT = 40
|
||||
|
||||
const COLORS = {
|
||||
sourceWaterfall: '#10b981',
|
||||
riverHealthy: ['#0ea5e9', '#06b6d4'],
|
||||
riverOverflow: ['#f59e0b', '#fbbf24'],
|
||||
riverCritical: ['#ef4444', '#f87171'],
|
||||
overflowBranch: '#f59e0b',
|
||||
spendingWaterfall: ['#8b5cf6', '#ec4899', '#06b6d4', '#3b82f6', '#10b981', '#6366f1'],
|
||||
outcomePool: '#3b82f6',
|
||||
bg: '#0f172a',
|
||||
text: '#e2e8f0',
|
||||
textMuted: '#94a3b8',
|
||||
}
|
||||
|
||||
// ─── Layout Engine ───────────────────────────────────────
|
||||
|
||||
function computeLayout(nodes: FlowNode[]): RiverLayout {
|
||||
const funnelNodes = nodes.filter(n => n.type === 'funnel')
|
||||
const outcomeNodes = nodes.filter(n => n.type === 'outcome')
|
||||
const sourceNodes = nodes.filter(n => n.type === 'source')
|
||||
|
||||
// Build adjacency: which funnels are children (overflow targets) of which
|
||||
const overflowTargets = new Set<string>()
|
||||
const spendingTargets = new Set<string>()
|
||||
const sourceTargets = new Set<string>()
|
||||
|
||||
funnelNodes.forEach(n => {
|
||||
const data = n.data as FunnelNodeData
|
||||
data.overflowAllocations?.forEach(a => overflowTargets.add(a.targetId))
|
||||
data.spendingAllocations?.forEach(a => spendingTargets.add(a.targetId))
|
||||
})
|
||||
sourceNodes.forEach(n => {
|
||||
const data = n.data as SourceNodeData
|
||||
data.targetAllocations?.forEach(a => sourceTargets.add(a.targetId))
|
||||
})
|
||||
|
||||
// Root funnels = funnels that are NOT overflow targets of other funnels
|
||||
// (but may be source targets)
|
||||
const rootFunnels = funnelNodes.filter(n => !overflowTargets.has(n.id))
|
||||
const childFunnels = funnelNodes.filter(n => overflowTargets.has(n.id))
|
||||
|
||||
// Assign layers
|
||||
const funnelLayers = new Map<string, number>()
|
||||
rootFunnels.forEach(n => funnelLayers.set(n.id, 0))
|
||||
|
||||
// BFS to assign layers to overflow children
|
||||
const queue = [...rootFunnels]
|
||||
while (queue.length > 0) {
|
||||
const current = queue.shift()!
|
||||
const data = current.data as FunnelNodeData
|
||||
const parentLayer = funnelLayers.get(current.id) ?? 0
|
||||
data.overflowAllocations?.forEach(a => {
|
||||
const child = funnelNodes.find(n => n.id === a.targetId)
|
||||
if (child && !funnelLayers.has(child.id)) {
|
||||
funnelLayers.set(child.id, parentLayer + 1)
|
||||
queue.push(child)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Find max flow rate for normalization
|
||||
const allFlowRates = funnelNodes.map(n => (n.data as FunnelNodeData).inflowRate || 1)
|
||||
const maxFlowRate = Math.max(...allFlowRates, 1)
|
||||
const maxValue = Math.max(...funnelNodes.map(n => (n.data as FunnelNodeData).currentValue || 1), 1)
|
||||
|
||||
// Compute funnel layouts
|
||||
// Group by layer, center each layer
|
||||
const layerGroups = new Map<number, FlowNode[]>()
|
||||
funnelNodes.forEach(n => {
|
||||
const layer = funnelLayers.get(n.id) ?? 0
|
||||
if (!layerGroups.has(layer)) layerGroups.set(layer, [])
|
||||
layerGroups.get(layer)!.push(n)
|
||||
})
|
||||
|
||||
const maxLayer = Math.max(...Array.from(layerGroups.keys()), 0)
|
||||
const sourceLayerY = GAP
|
||||
const funnelStartY = sourceLayerY + SOURCE_HEIGHT + WATERFALL_HEIGHT + GAP
|
||||
|
||||
const funnelLayouts: FunnelLayout[] = []
|
||||
const layerXRanges = new Map<number, { minX: number; maxX: number }>()
|
||||
|
||||
for (let layer = 0; layer <= maxLayer; layer++) {
|
||||
const layerNodes = layerGroups.get(layer) || []
|
||||
const layerY = funnelStartY + layer * (LAYER_HEIGHT + WATERFALL_HEIGHT + GAP)
|
||||
const totalWidth = layerNodes.length * SEGMENT_LENGTH + (layerNodes.length - 1) * GAP * 2
|
||||
|
||||
layerNodes.forEach((n, i) => {
|
||||
const data = n.data as FunnelNodeData
|
||||
const fillRatio = Math.min(1, data.currentValue / (data.maxCapacity || 1))
|
||||
const riverWidth = MIN_RIVER_WIDTH + fillRatio * (MAX_RIVER_WIDTH - MIN_RIVER_WIDTH)
|
||||
const x = -totalWidth / 2 + i * (SEGMENT_LENGTH + GAP * 2)
|
||||
const status: 'healthy' | 'overflow' | 'critical' =
|
||||
data.currentValue > data.maxThreshold ? 'overflow' :
|
||||
data.currentValue < data.minThreshold ? 'critical' : 'healthy'
|
||||
|
||||
funnelLayouts.push({
|
||||
id: n.id,
|
||||
label: data.label,
|
||||
data,
|
||||
x,
|
||||
y: layerY,
|
||||
riverWidth,
|
||||
segmentLength: SEGMENT_LENGTH,
|
||||
layer,
|
||||
status,
|
||||
})
|
||||
|
||||
const range = layerXRanges.get(layer) || { minX: Infinity, maxX: -Infinity }
|
||||
range.minX = Math.min(range.minX, x)
|
||||
range.maxX = Math.max(range.maxX, x + SEGMENT_LENGTH)
|
||||
layerXRanges.set(layer, range)
|
||||
})
|
||||
}
|
||||
|
||||
// Source layouts
|
||||
const sourceLayouts: SourceLayout[] = sourceNodes.map((n, i) => {
|
||||
const data = n.data as SourceNodeData
|
||||
const totalWidth = sourceNodes.length * 120 + (sourceNodes.length - 1) * GAP
|
||||
return {
|
||||
id: n.id,
|
||||
label: data.label,
|
||||
flowRate: data.flowRate,
|
||||
x: -totalWidth / 2 + i * (120 + GAP),
|
||||
y: sourceLayerY,
|
||||
width: 120,
|
||||
}
|
||||
})
|
||||
|
||||
// Source waterfalls (source → root funnel)
|
||||
const sourceWaterfalls: WaterfallLayout[] = []
|
||||
sourceNodes.forEach(sn => {
|
||||
const data = sn.data as SourceNodeData
|
||||
const sourceLayout = sourceLayouts.find(s => s.id === sn.id)
|
||||
if (!sourceLayout) return
|
||||
|
||||
data.targetAllocations?.forEach((alloc, i) => {
|
||||
const targetLayout = funnelLayouts.find(f => f.id === alloc.targetId)
|
||||
if (!targetLayout) return
|
||||
|
||||
const flowAmount = (alloc.percentage / 100) * data.flowRate
|
||||
const width = Math.max(6, (flowAmount / Math.max(data.flowRate, 1)) * 30)
|
||||
|
||||
sourceWaterfalls.push({
|
||||
id: `src-wf-${sn.id}-${alloc.targetId}`,
|
||||
sourceId: sn.id,
|
||||
targetId: alloc.targetId,
|
||||
label: `${alloc.percentage}%`,
|
||||
percentage: alloc.percentage,
|
||||
x: sourceLayout.x + sourceLayout.width / 2 + (i - (data.targetAllocations.length - 1) / 2) * 30,
|
||||
yStart: sourceLayout.y + SOURCE_HEIGHT,
|
||||
yEnd: targetLayout.y,
|
||||
width,
|
||||
color: COLORS.sourceWaterfall,
|
||||
flowAmount,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// If no source nodes, create implicit waterfalls for root funnels with inflowRate
|
||||
if (sourceNodes.length === 0) {
|
||||
rootFunnels.forEach(rn => {
|
||||
const data = rn.data as FunnelNodeData
|
||||
if (data.inflowRate <= 0) return
|
||||
const layout = funnelLayouts.find(f => f.id === rn.id)
|
||||
if (!layout) return
|
||||
|
||||
sourceWaterfalls.push({
|
||||
id: `implicit-wf-${rn.id}`,
|
||||
sourceId: 'implicit',
|
||||
targetId: rn.id,
|
||||
label: `$${Math.floor(data.inflowRate)}/mo`,
|
||||
percentage: 100,
|
||||
x: layout.x + layout.segmentLength / 2,
|
||||
yStart: GAP,
|
||||
yEnd: layout.y,
|
||||
width: Math.max(8, (data.inflowRate / maxFlowRate) * 30),
|
||||
color: COLORS.sourceWaterfall,
|
||||
flowAmount: data.inflowRate,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Overflow branches (funnel → child funnel)
|
||||
const overflowBranches: BranchLayout[] = []
|
||||
funnelNodes.forEach(n => {
|
||||
const data = n.data as FunnelNodeData
|
||||
const parentLayout = funnelLayouts.find(f => f.id === n.id)
|
||||
if (!parentLayout) return
|
||||
|
||||
data.overflowAllocations?.forEach((alloc, i) => {
|
||||
const childLayout = funnelLayouts.find(f => f.id === alloc.targetId)
|
||||
if (!childLayout) return
|
||||
|
||||
const flowAmount = (alloc.percentage / 100) * (data.inflowRate || 1)
|
||||
const width = Math.max(4, (alloc.percentage / 100) * parentLayout.riverWidth * 0.6)
|
||||
|
||||
overflowBranches.push({
|
||||
sourceId: n.id,
|
||||
targetId: alloc.targetId,
|
||||
percentage: alloc.percentage,
|
||||
x1: parentLayout.x + parentLayout.segmentLength,
|
||||
y1: parentLayout.y + parentLayout.riverWidth / 2,
|
||||
x2: childLayout.x,
|
||||
y2: childLayout.y + childLayout.riverWidth / 2,
|
||||
width,
|
||||
color: alloc.color || COLORS.overflowBranch,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Outcome layouts
|
||||
const outcomeY = funnelStartY + (maxLayer + 1) * (LAYER_HEIGHT + WATERFALL_HEIGHT + GAP) + WATERFALL_HEIGHT
|
||||
const totalOutcomeWidth = outcomeNodes.length * (POOL_WIDTH + GAP) - GAP
|
||||
const outcomeLayouts: OutcomeLayout[] = outcomeNodes.map((n, i) => {
|
||||
const data = n.data as OutcomeNodeData
|
||||
const fillPercent = data.fundingTarget > 0
|
||||
? Math.min(100, (data.fundingReceived / data.fundingTarget) * 100)
|
||||
: 0
|
||||
|
||||
return {
|
||||
id: n.id,
|
||||
label: data.label,
|
||||
data,
|
||||
x: -totalOutcomeWidth / 2 + i * (POOL_WIDTH + GAP),
|
||||
y: outcomeY,
|
||||
poolWidth: POOL_WIDTH,
|
||||
fillPercent,
|
||||
}
|
||||
})
|
||||
|
||||
// Spending waterfalls (funnel → outcome)
|
||||
const spendingWaterfalls: WaterfallLayout[] = []
|
||||
funnelNodes.forEach(n => {
|
||||
const data = n.data as FunnelNodeData
|
||||
const parentLayout = funnelLayouts.find(f => f.id === n.id)
|
||||
if (!parentLayout) return
|
||||
|
||||
data.spendingAllocations?.forEach((alloc, i) => {
|
||||
const outcomeLayout = outcomeLayouts.find(o => o.id === alloc.targetId)
|
||||
if (!outcomeLayout) return
|
||||
|
||||
const flowAmount = (alloc.percentage / 100) * (data.inflowRate || 1)
|
||||
const width = Math.max(4, (alloc.percentage / 100) * 24)
|
||||
|
||||
spendingWaterfalls.push({
|
||||
id: `spend-wf-${n.id}-${alloc.targetId}`,
|
||||
sourceId: n.id,
|
||||
targetId: alloc.targetId,
|
||||
label: `${alloc.percentage}%`,
|
||||
percentage: alloc.percentage,
|
||||
x: parentLayout.x + parentLayout.segmentLength / 2 +
|
||||
(i - ((data.spendingAllocations?.length || 1) - 1) / 2) * 24,
|
||||
yStart: parentLayout.y + parentLayout.riverWidth + 4,
|
||||
yEnd: outcomeLayout.y,
|
||||
width,
|
||||
color: alloc.color || COLORS.spendingWaterfall[i % COLORS.spendingWaterfall.length],
|
||||
flowAmount,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Compute total bounds
|
||||
const allX = [
|
||||
...funnelLayouts.map(f => f.x),
|
||||
...funnelLayouts.map(f => f.x + f.segmentLength),
|
||||
...outcomeLayouts.map(o => o.x),
|
||||
...outcomeLayouts.map(o => o.x + o.poolWidth),
|
||||
...sourceLayouts.map(s => s.x),
|
||||
...sourceLayouts.map(s => s.x + s.width),
|
||||
]
|
||||
const allY = [
|
||||
...funnelLayouts.map(f => f.y + f.riverWidth),
|
||||
...outcomeLayouts.map(o => o.y + POOL_HEIGHT),
|
||||
sourceLayerY,
|
||||
]
|
||||
|
||||
const minX = Math.min(...allX, -100)
|
||||
const maxX = Math.max(...allX, 100)
|
||||
const maxY = Math.max(...allY, 400)
|
||||
const padding = 80
|
||||
|
||||
// Shift everything so minX starts at padding
|
||||
const offsetX = -minX + padding
|
||||
const offsetY = padding
|
||||
|
||||
// Apply offsets
|
||||
funnelLayouts.forEach(f => { f.x += offsetX; f.y += offsetY })
|
||||
outcomeLayouts.forEach(o => { o.x += offsetX; o.y += offsetY })
|
||||
sourceLayouts.forEach(s => { s.x += offsetX; s.y += offsetY })
|
||||
sourceWaterfalls.forEach(w => { w.x += offsetX; w.yStart += offsetY; w.yEnd += offsetY })
|
||||
overflowBranches.forEach(b => { b.x1 += offsetX; b.y1 += offsetY; b.x2 += offsetX; b.y2 += offsetY })
|
||||
spendingWaterfalls.forEach(w => { w.x += offsetX; w.yStart += offsetY; w.yEnd += offsetY })
|
||||
|
||||
return {
|
||||
sources: sourceLayouts,
|
||||
funnels: funnelLayouts,
|
||||
outcomes: outcomeLayouts,
|
||||
sourceWaterfalls,
|
||||
overflowBranches,
|
||||
spendingWaterfalls,
|
||||
width: maxX - minX + padding * 2,
|
||||
height: maxY + offsetY + padding,
|
||||
}
|
||||
}
|
||||
|
||||
// ─── SVG Sub-components ──────────────────────────────────
|
||||
|
||||
function WaterfallStream({ wf, index }: { wf: WaterfallLayout; index: number }) {
|
||||
const height = wf.yEnd - wf.yStart
|
||||
const numDroplets = Math.max(3, Math.min(8, Math.floor(wf.width / 3)))
|
||||
|
||||
return (
|
||||
<g>
|
||||
{/* Main water stream */}
|
||||
<defs>
|
||||
<linearGradient id={`wf-grad-${wf.id}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={wf.color} stopOpacity="0.9" />
|
||||
<stop offset="50%" stopColor={wf.color} stopOpacity="0.6" />
|
||||
<stop offset="100%" stopColor={wf.color} stopOpacity="0.3" />
|
||||
</linearGradient>
|
||||
<clipPath id={`wf-clip-${wf.id}`}>
|
||||
<rect x={wf.x - wf.width / 2} y={wf.yStart} width={wf.width} height={height} />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
{/* Glow behind */}
|
||||
<rect
|
||||
x={wf.x - wf.width / 2 - 3}
|
||||
y={wf.yStart}
|
||||
width={wf.width + 6}
|
||||
height={height}
|
||||
rx={wf.width / 2}
|
||||
fill={wf.color}
|
||||
opacity={0.12}
|
||||
/>
|
||||
|
||||
{/* Animated water strips */}
|
||||
<g clipPath={`url(#wf-clip-${wf.id})`}>
|
||||
{[0, 1, 2].map(i => (
|
||||
<rect
|
||||
key={i}
|
||||
x={wf.x - wf.width / 2 + 1}
|
||||
y={wf.yStart - height}
|
||||
width={wf.width - 2}
|
||||
height={height}
|
||||
fill={`url(#wf-grad-${wf.id})`}
|
||||
rx={2}
|
||||
style={{
|
||||
animation: `waterFlow ${1.2 + i * 0.3}s linear infinite`,
|
||||
animationDelay: `${i * -0.4}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Side mist lines */}
|
||||
<line
|
||||
x1={wf.x - wf.width / 2 - 1}
|
||||
y1={wf.yStart}
|
||||
x2={wf.x - wf.width / 2 - 1}
|
||||
y2={wf.yEnd}
|
||||
stroke={wf.color}
|
||||
strokeWidth={1}
|
||||
opacity={0.3}
|
||||
strokeDasharray="4 6"
|
||||
style={{ animation: `riverCurrent 1s linear infinite` }}
|
||||
/>
|
||||
<line
|
||||
x1={wf.x + wf.width / 2 + 1}
|
||||
y1={wf.yStart}
|
||||
x2={wf.x + wf.width / 2 + 1}
|
||||
y2={wf.yEnd}
|
||||
stroke={wf.color}
|
||||
strokeWidth={1}
|
||||
opacity={0.3}
|
||||
strokeDasharray="4 6"
|
||||
style={{ animation: `riverCurrent 1s linear infinite` }}
|
||||
/>
|
||||
|
||||
{/* Droplets */}
|
||||
{Array.from({ length: numDroplets }, (_, i) => {
|
||||
const dx = (Math.random() - 0.5) * (wf.width + 10)
|
||||
const delay = Math.random() * 2
|
||||
const dur = 1 + Math.random() * 1.5
|
||||
return (
|
||||
<circle
|
||||
key={`drop-${wf.id}-${i}`}
|
||||
cx={wf.x + dx}
|
||||
cy={wf.yEnd - 10}
|
||||
r={1.5}
|
||||
fill={wf.color}
|
||||
opacity={0.6}
|
||||
style={{
|
||||
animation: `droplet ${dur}s ease-in infinite`,
|
||||
animationDelay: `${delay}s`,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Splash ripples at bottom */}
|
||||
{[0, 1, 2].map(i => (
|
||||
<circle
|
||||
key={`ripple-${wf.id}-${i}`}
|
||||
cx={wf.x}
|
||||
cy={wf.yEnd}
|
||||
r={2}
|
||||
fill="none"
|
||||
stroke={wf.color}
|
||||
strokeWidth={1}
|
||||
style={{
|
||||
animation: `ripple 2s ease-out infinite`,
|
||||
animationDelay: `${i * 0.6}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Label */}
|
||||
<text
|
||||
x={wf.x}
|
||||
y={wf.yStart + height / 2}
|
||||
textAnchor="middle"
|
||||
fill={COLORS.text}
|
||||
fontSize={9}
|
||||
fontWeight={600}
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{wf.label}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
function RiverSegment({ funnel }: { funnel: FunnelLayout }) {
|
||||
const { id, label, data, x, y, riverWidth, segmentLength, status } = funnel
|
||||
const gradColors = status === 'overflow' ? COLORS.riverOverflow :
|
||||
status === 'critical' ? COLORS.riverCritical : COLORS.riverHealthy
|
||||
|
||||
const fillPercent = Math.min(100, (data.currentValue / (data.maxCapacity || 1)) * 100)
|
||||
const thresholdMinY = y + riverWidth * 0.85
|
||||
const thresholdMaxY = y + riverWidth * 0.15
|
||||
|
||||
return (
|
||||
<g>
|
||||
<defs>
|
||||
<linearGradient id={`river-grad-${id}`} x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stopColor={gradColors[0]} stopOpacity="0.6" />
|
||||
<stop offset="30%" stopColor={gradColors[0]} stopOpacity="0.9" />
|
||||
<stop offset="70%" stopColor={gradColors[1]} stopOpacity="0.9" />
|
||||
<stop offset="100%" stopColor={gradColors[1]} stopOpacity="0.6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{/* River glow */}
|
||||
<rect
|
||||
x={x - 4}
|
||||
y={y - 4}
|
||||
width={segmentLength + 8}
|
||||
height={riverWidth + 8}
|
||||
rx={riverWidth / 2 + 4}
|
||||
fill={gradColors[0]}
|
||||
opacity={0.1}
|
||||
/>
|
||||
|
||||
{/* River body */}
|
||||
<rect
|
||||
x={x}
|
||||
y={y}
|
||||
width={segmentLength}
|
||||
height={riverWidth}
|
||||
rx={riverWidth / 2}
|
||||
fill={`url(#river-grad-${id})`}
|
||||
/>
|
||||
|
||||
{/* Surface current lines */}
|
||||
{[0.3, 0.5, 0.7].map((pos, i) => (
|
||||
<line
|
||||
key={`current-${id}-${i}`}
|
||||
x1={x + 10}
|
||||
y1={y + riverWidth * pos}
|
||||
x2={x + segmentLength - 10}
|
||||
y2={y + riverWidth * pos}
|
||||
stroke="rgba(255,255,255,0.25)"
|
||||
strokeWidth={1}
|
||||
strokeDasharray="8 12"
|
||||
style={{
|
||||
animation: `riverCurrent ${1.5 + i * 0.3}s linear infinite`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Shimmer highlight */}
|
||||
<ellipse
|
||||
cx={x + segmentLength * 0.4}
|
||||
cy={y + riverWidth * 0.3}
|
||||
rx={segmentLength * 0.15}
|
||||
ry={riverWidth * 0.12}
|
||||
fill="rgba(255,255,255,0.15)"
|
||||
style={{ animation: 'shimmer 3s ease-in-out infinite' }}
|
||||
/>
|
||||
|
||||
{/* Threshold markers */}
|
||||
<line
|
||||
x1={x + 5}
|
||||
y1={thresholdMaxY}
|
||||
x2={x + segmentLength - 5}
|
||||
y2={thresholdMaxY}
|
||||
stroke="#f59e0b"
|
||||
strokeWidth={1.5}
|
||||
strokeDasharray="4 3"
|
||||
opacity={0.6}
|
||||
/>
|
||||
<text x={x + segmentLength + 6} y={thresholdMaxY + 3} fontSize={7} fill="#f59e0b" fontWeight="bold">MAX</text>
|
||||
|
||||
<line
|
||||
x1={x + 5}
|
||||
y1={thresholdMinY}
|
||||
x2={x + segmentLength - 5}
|
||||
y2={thresholdMinY}
|
||||
stroke="#ef4444"
|
||||
strokeWidth={1.5}
|
||||
strokeDasharray="4 3"
|
||||
opacity={0.6}
|
||||
/>
|
||||
<text x={x + segmentLength + 6} y={thresholdMinY + 3} fontSize={7} fill="#ef4444" fontWeight="bold">MIN</text>
|
||||
|
||||
{/* Label */}
|
||||
<text
|
||||
x={x + segmentLength / 2}
|
||||
y={y - 10}
|
||||
textAnchor="middle"
|
||||
fill={COLORS.text}
|
||||
fontSize={12}
|
||||
fontWeight={700}
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
|
||||
{/* Value */}
|
||||
<text
|
||||
x={x + segmentLength / 2}
|
||||
y={y + riverWidth / 2 + 4}
|
||||
textAnchor="middle"
|
||||
fill="white"
|
||||
fontSize={13}
|
||||
fontWeight={700}
|
||||
fontFamily="monospace"
|
||||
>
|
||||
${Math.floor(data.currentValue).toLocaleString()}
|
||||
</text>
|
||||
|
||||
{/* Status pill */}
|
||||
<rect
|
||||
x={x + segmentLength / 2 - 16}
|
||||
y={y + riverWidth + 6}
|
||||
width={32}
|
||||
height={14}
|
||||
rx={7}
|
||||
fill={status === 'overflow' ? '#f59e0b' : status === 'critical' ? '#ef4444' : '#10b981'}
|
||||
opacity={0.9}
|
||||
/>
|
||||
<text
|
||||
x={x + segmentLength / 2}
|
||||
y={y + riverWidth + 16}
|
||||
textAnchor="middle"
|
||||
fill="white"
|
||||
fontSize={7}
|
||||
fontWeight={700}
|
||||
>
|
||||
{status === 'overflow' ? 'OVER' : status === 'critical' ? 'LOW' : 'OK'}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
function OverflowBranch({ branch }: { branch: BranchLayout }) {
|
||||
const { x1, y1, x2, y2, width, color, percentage } = branch
|
||||
const midX = (x1 + x2) / 2
|
||||
const midY = (y1 + y2) / 2
|
||||
|
||||
// Curved path connecting two river segments
|
||||
const path = `M ${x1} ${y1} C ${x1 + 60} ${y1}, ${x2 - 60} ${y2}, ${x2} ${y2}`
|
||||
|
||||
return (
|
||||
<g>
|
||||
{/* Glow */}
|
||||
<path
|
||||
d={path}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={width + 6}
|
||||
opacity={0.1}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
{/* Main branch */}
|
||||
<path
|
||||
d={path}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={width}
|
||||
opacity={0.7}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray="10 5"
|
||||
style={{ animation: `riverCurrent 1.5s linear infinite` }}
|
||||
/>
|
||||
{/* Flow direction arrows */}
|
||||
<text
|
||||
x={midX}
|
||||
y={midY - width / 2 - 4}
|
||||
textAnchor="middle"
|
||||
fill={color}
|
||||
fontSize={9}
|
||||
fontWeight={600}
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{percentage}%
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
function OutcomePool({ outcome }: { outcome: OutcomeLayout }) {
|
||||
const { id, label, data, x, y, poolWidth, fillPercent } = outcome
|
||||
const fillHeight = (fillPercent / 100) * POOL_HEIGHT
|
||||
|
||||
const statusColor =
|
||||
data.status === 'completed' ? '#10b981' :
|
||||
data.status === 'in-progress' ? '#3b82f6' :
|
||||
data.status === 'blocked' ? '#ef4444' : '#64748b'
|
||||
|
||||
return (
|
||||
<g>
|
||||
{/* Pool container */}
|
||||
<rect
|
||||
x={x}
|
||||
y={y}
|
||||
width={poolWidth}
|
||||
height={POOL_HEIGHT}
|
||||
rx={8}
|
||||
fill="rgba(15,23,42,0.8)"
|
||||
stroke={statusColor}
|
||||
strokeWidth={1.5}
|
||||
opacity={0.9}
|
||||
/>
|
||||
|
||||
{/* Water fill */}
|
||||
<defs>
|
||||
<clipPath id={`pool-clip-${id}`}>
|
||||
<rect x={x + 2} y={y + 2} width={poolWidth - 4} height={POOL_HEIGHT - 4} rx={6} />
|
||||
</clipPath>
|
||||
<linearGradient id={`pool-grad-${id}`} x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stopColor={statusColor} stopOpacity="0.8" />
|
||||
<stop offset="100%" stopColor={statusColor} stopOpacity="0.4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g clipPath={`url(#pool-clip-${id})`}>
|
||||
<rect
|
||||
x={x + 2}
|
||||
y={y + POOL_HEIGHT - fillHeight}
|
||||
width={poolWidth - 4}
|
||||
height={fillHeight}
|
||||
fill={`url(#pool-grad-${id})`}
|
||||
/>
|
||||
{/* Water surface wave */}
|
||||
{fillPercent > 5 && (
|
||||
<ellipse
|
||||
cx={x + poolWidth / 2}
|
||||
cy={y + POOL_HEIGHT - fillHeight}
|
||||
rx={poolWidth * 0.3}
|
||||
ry={2}
|
||||
fill="rgba(255,255,255,0.2)"
|
||||
style={{ animation: 'waveFloat 2s ease-in-out infinite' }}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
|
||||
{/* Label */}
|
||||
<text
|
||||
x={x + poolWidth / 2}
|
||||
y={y - 6}
|
||||
textAnchor="middle"
|
||||
fill={COLORS.text}
|
||||
fontSize={9}
|
||||
fontWeight={600}
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
|
||||
{/* Value */}
|
||||
<text
|
||||
x={x + poolWidth / 2}
|
||||
y={y + POOL_HEIGHT / 2 + 2}
|
||||
textAnchor="middle"
|
||||
fill="white"
|
||||
fontSize={9}
|
||||
fontWeight={600}
|
||||
fontFamily="monospace"
|
||||
>
|
||||
${Math.floor(data.fundingReceived).toLocaleString()}
|
||||
</text>
|
||||
|
||||
{/* Progress */}
|
||||
<text
|
||||
x={x + poolWidth / 2}
|
||||
y={y + POOL_HEIGHT / 2 + 14}
|
||||
textAnchor="middle"
|
||||
fill={COLORS.textMuted}
|
||||
fontSize={7}
|
||||
fontFamily="monospace"
|
||||
>
|
||||
{Math.round(fillPercent)}% of ${Math.floor(data.fundingTarget).toLocaleString()}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
function SourceBox({ source }: { source: SourceLayout }) {
|
||||
return (
|
||||
<g>
|
||||
<rect
|
||||
x={source.x}
|
||||
y={source.y}
|
||||
width={source.width}
|
||||
height={SOURCE_HEIGHT}
|
||||
rx={8}
|
||||
fill="rgba(16,185,129,0.15)"
|
||||
stroke="#10b981"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
<text
|
||||
x={source.x + source.width / 2}
|
||||
y={source.y + SOURCE_HEIGHT / 2 - 4}
|
||||
textAnchor="middle"
|
||||
fill="#10b981"
|
||||
fontSize={10}
|
||||
fontWeight={700}
|
||||
>
|
||||
{source.label}
|
||||
</text>
|
||||
<text
|
||||
x={source.x + source.width / 2}
|
||||
y={source.y + SOURCE_HEIGHT / 2 + 10}
|
||||
textAnchor="middle"
|
||||
fill="#10b981"
|
||||
fontSize={8}
|
||||
fontFamily="monospace"
|
||||
opacity={0.7}
|
||||
>
|
||||
${source.flowRate.toLocaleString()}/mo
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main Component ──────────────────────────────────────
|
||||
|
||||
interface BudgetRiverProps {
|
||||
nodes: FlowNode[]
|
||||
isSimulating?: boolean
|
||||
}
|
||||
|
||||
export default function BudgetRiver({ nodes, isSimulating = false }: BudgetRiverProps) {
|
||||
const [animatedNodes, setAnimatedNodes] = useState<FlowNode[]>(nodes)
|
||||
|
||||
// Update when parent nodes change
|
||||
useEffect(() => {
|
||||
setAnimatedNodes(nodes)
|
||||
}, [nodes])
|
||||
|
||||
// Simulation
|
||||
useEffect(() => {
|
||||
if (!isSimulating) return
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setAnimatedNodes(prev =>
|
||||
prev.map(node => {
|
||||
if (node.type === 'funnel') {
|
||||
const data = node.data as FunnelNodeData
|
||||
const change = (Math.random() - 0.45) * 300
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
currentValue: Math.max(0, Math.min(data.maxCapacity * 1.1, data.currentValue + change)),
|
||||
},
|
||||
}
|
||||
} else if (node.type === 'outcome') {
|
||||
const data = node.data as OutcomeNodeData
|
||||
const change = Math.random() * 80
|
||||
const newReceived = Math.min(data.fundingTarget * 1.05, data.fundingReceived + change)
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
fundingReceived: newReceived,
|
||||
status: newReceived >= data.fundingTarget ? 'completed' :
|
||||
data.status === 'not-started' && newReceived > 0 ? 'in-progress' : data.status,
|
||||
},
|
||||
}
|
||||
}
|
||||
return node
|
||||
})
|
||||
)
|
||||
}, 500)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [isSimulating])
|
||||
|
||||
const layout = useMemo(() => computeLayout(animatedNodes), [animatedNodes])
|
||||
|
||||
return (
|
||||
<div className="w-full h-full overflow-auto">
|
||||
<svg
|
||||
width={layout.width}
|
||||
height={layout.height}
|
||||
viewBox={`0 0 ${layout.width} ${layout.height}`}
|
||||
className="mx-auto"
|
||||
style={{ minWidth: layout.width, minHeight: layout.height }}
|
||||
>
|
||||
{/* Background */}
|
||||
<rect width={layout.width} height={layout.height} fill={COLORS.bg} />
|
||||
|
||||
{/* Background stars/dots for atmosphere */}
|
||||
{Array.from({ length: 30 }, (_, i) => (
|
||||
<circle
|
||||
key={`star-${i}`}
|
||||
cx={Math.random() * layout.width}
|
||||
cy={Math.random() * layout.height}
|
||||
r={0.5 + Math.random() * 1}
|
||||
fill="rgba(148,163,184,0.2)"
|
||||
style={{
|
||||
animation: `shimmer ${2 + Math.random() * 3}s ease-in-out infinite`,
|
||||
animationDelay: `${Math.random() * 3}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Layer 1: Source boxes */}
|
||||
{layout.sources.map(s => (
|
||||
<SourceBox key={s.id} source={s} />
|
||||
))}
|
||||
|
||||
{/* Layer 2: Source waterfalls (flowing into river) */}
|
||||
{layout.sourceWaterfalls.map((wf, i) => (
|
||||
<WaterfallStream key={wf.id} wf={wf} index={i} />
|
||||
))}
|
||||
|
||||
{/* Layer 3: River segments */}
|
||||
{layout.funnels.map(f => (
|
||||
<RiverSegment key={f.id} funnel={f} />
|
||||
))}
|
||||
|
||||
{/* Layer 4: Overflow branches */}
|
||||
{layout.overflowBranches.map((b, i) => (
|
||||
<OverflowBranch key={`overflow-${i}`} branch={b} />
|
||||
))}
|
||||
|
||||
{/* Layer 5: Spending waterfalls (flowing out) */}
|
||||
{layout.spendingWaterfalls.map((wf, i) => (
|
||||
<WaterfallStream key={wf.id} wf={wf} index={i} />
|
||||
))}
|
||||
|
||||
{/* Layer 6: Outcome pools */}
|
||||
{layout.outcomes.map(o => (
|
||||
<OutcomePool key={o.id} outcome={o} />
|
||||
))}
|
||||
|
||||
{/* Title watermark */}
|
||||
<text
|
||||
x={layout.width / 2}
|
||||
y={layout.height - 20}
|
||||
textAnchor="middle"
|
||||
fill="rgba(148,163,184,0.15)"
|
||||
fontSize={14}
|
||||
fontWeight={700}
|
||||
letterSpacing={4}
|
||||
>
|
||||
rFUNDS BUDGET RIVER
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -18,16 +18,17 @@ import '@xyflow/react/dist/style.css'
|
|||
|
||||
import FunnelNode from './nodes/FunnelNode'
|
||||
import OutcomeNode from './nodes/OutcomeNode'
|
||||
import SourceNode from './nodes/SourceNode'
|
||||
import AllocationEdge from './edges/AllocationEdge'
|
||||
import StreamEdge from './edges/StreamEdge'
|
||||
import IntegrationPanel from './IntegrationPanel'
|
||||
import type { FlowNode, FlowEdge, FunnelNodeData, OutcomeNodeData, IntegrationConfig, AllocationEdgeData } from '@/lib/types'
|
||||
import { SPENDING_COLORS, OVERFLOW_COLORS } from '@/lib/presets'
|
||||
import { simulateTick } from '@/lib/simulation'
|
||||
import type { FlowNode, FlowEdge, FunnelNodeData, OutcomeNodeData, SourceNodeData, IntegrationConfig, AllocationEdgeData } from '@/lib/types'
|
||||
import { SPENDING_COLORS, OVERFLOW_COLORS, SOURCE_COLORS } from '@/lib/presets'
|
||||
|
||||
const nodeTypes = {
|
||||
funnel: FunnelNode,
|
||||
outcome: OutcomeNode,
|
||||
source: SourceNode,
|
||||
}
|
||||
|
||||
const edgeTypes = {
|
||||
|
|
@ -144,7 +145,7 @@ function generateEdges(
|
|||
})
|
||||
})
|
||||
|
||||
// Stream edges (Superfluid visual planning)
|
||||
// Stream edges (Superfluid planning)
|
||||
data.streamAllocations?.forEach((stream) => {
|
||||
const statusColor = stream.status === 'active' ? '#3b82f6' : stream.status === 'paused' ? '#f97316' : '#22c55e'
|
||||
edges.push({
|
||||
|
|
@ -175,6 +176,48 @@ function generateEdges(
|
|||
})
|
||||
})
|
||||
|
||||
// Source node edges
|
||||
nodes.forEach((node) => {
|
||||
if (node.type !== 'source') return
|
||||
const data = node.data as SourceNodeData
|
||||
const rate = data.flowRate || 1
|
||||
const allocCount = data.targetAllocations?.length ?? 0
|
||||
|
||||
data.targetAllocations?.forEach((alloc) => {
|
||||
const flowValue = (alloc.percentage / 100) * rate
|
||||
const strokeWidth = MIN_WIDTH + (flowValue / maxFlow) * (MAX_WIDTH - MIN_WIDTH)
|
||||
|
||||
edges.push({
|
||||
id: `source-${node.id}-${alloc.targetId}`,
|
||||
source: node.id,
|
||||
target: alloc.targetId,
|
||||
sourceHandle: 'source-out',
|
||||
animated: true,
|
||||
style: {
|
||||
stroke: alloc.color || '#10b981',
|
||||
strokeWidth,
|
||||
opacity: 0.8,
|
||||
},
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: alloc.color || '#10b981',
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
data: {
|
||||
allocation: alloc.percentage,
|
||||
color: alloc.color || '#10b981',
|
||||
edgeType: 'spending' as const,
|
||||
sourceId: node.id,
|
||||
targetId: alloc.targetId,
|
||||
siblingCount: allocCount,
|
||||
onAdjust,
|
||||
},
|
||||
type: 'allocation',
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
return edges
|
||||
}
|
||||
|
||||
|
|
@ -191,6 +234,7 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
const [nodes, setNodes, onNodesChangeHandler] = useNodesState(initNodes)
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([] as FlowEdge[])
|
||||
const [isSimulating, setIsSimulating] = useState(mode === 'demo')
|
||||
const [panelsCollapsed, setPanelsCollapsed] = useState(false)
|
||||
const edgesRef = useRef(edges)
|
||||
edgesRef.current = edges
|
||||
const { screenToFlowPosition } = useReactFlow()
|
||||
|
|
@ -254,20 +298,29 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
|
||||
// Smart edge regeneration
|
||||
const allocationsKey = useMemo(() => {
|
||||
return JSON.stringify(
|
||||
nodes
|
||||
.filter(n => n.type === 'funnel')
|
||||
.map(n => {
|
||||
const d = n.data as FunnelNodeData
|
||||
return {
|
||||
id: n.id,
|
||||
overflow: d.overflowAllocations,
|
||||
spending: d.spendingAllocations,
|
||||
streams: d.streamAllocations,
|
||||
rate: d.inflowRate,
|
||||
}
|
||||
})
|
||||
)
|
||||
const funnelKeys = nodes
|
||||
.filter(n => n.type === 'funnel')
|
||||
.map(n => {
|
||||
const d = n.data as FunnelNodeData
|
||||
return {
|
||||
id: n.id,
|
||||
overflow: d.overflowAllocations,
|
||||
spending: d.spendingAllocations,
|
||||
streams: d.streamAllocations,
|
||||
rate: d.inflowRate,
|
||||
}
|
||||
})
|
||||
const sourceKeys = nodes
|
||||
.filter(n => n.type === 'source')
|
||||
.map(n => {
|
||||
const d = n.data as SourceNodeData
|
||||
return {
|
||||
id: n.id,
|
||||
targets: d.targetAllocations,
|
||||
rate: d.flowRate,
|
||||
}
|
||||
})
|
||||
return JSON.stringify({ funnelKeys, sourceKeys })
|
||||
}, [nodes])
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -282,8 +335,39 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
const isOverflow = params.sourceHandle?.startsWith('outflow')
|
||||
const isSpending = params.sourceHandle === 'spending-out'
|
||||
const isStream = params.sourceHandle === 'stream-out'
|
||||
const isSourceOut = params.sourceHandle === 'source-out'
|
||||
|
||||
if (!isOverflow && !isSpending && !isStream) return
|
||||
if (!isOverflow && !isSpending && !isStream && !isSourceOut) return
|
||||
|
||||
// Handle source node connections
|
||||
if (isSourceOut) {
|
||||
setNodes((nds) => nds.map((node) => {
|
||||
if (node.id !== params.source || node.type !== 'source') return node
|
||||
const data = node.data as SourceNodeData
|
||||
const existing = data.targetAllocations || []
|
||||
if (existing.some(a => a.targetId === params.target)) return node
|
||||
const newPct = existing.length === 0 ? 100 : Math.floor(100 / (existing.length + 1))
|
||||
const redistributed = existing.map(a => ({
|
||||
...a,
|
||||
percentage: Math.floor(a.percentage * existing.length / (existing.length + 1))
|
||||
}))
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
targetAllocations: [
|
||||
...redistributed,
|
||||
{
|
||||
targetId: params.target!,
|
||||
percentage: newPct,
|
||||
color: SOURCE_COLORS[existing.length % SOURCE_COLORS.length],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}))
|
||||
return
|
||||
}
|
||||
|
||||
setNodes((nds) => nds.map((node) => {
|
||||
if (node.id !== params.source || node.type !== 'funnel') return node
|
||||
|
|
@ -369,6 +453,24 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
const newTargetId = newConnection.target
|
||||
if (oldTargetId === newTargetId) return
|
||||
|
||||
// Source edges: reconnect source allocation
|
||||
if (oldEdge.id?.startsWith('source-')) {
|
||||
setNodes((nds) => nds.map((node) => {
|
||||
if (node.id !== oldEdge.source || node.type !== 'source') return node
|
||||
const data = node.data as SourceNodeData
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
targetAllocations: (data.targetAllocations || []).map(a =>
|
||||
a.targetId === oldTargetId ? { ...a, targetId: newTargetId } : a
|
||||
),
|
||||
},
|
||||
}
|
||||
}))
|
||||
return
|
||||
}
|
||||
|
||||
// Stream edges: reconnect stream allocation
|
||||
if (oldEdge.type === 'stream') {
|
||||
setNodes((nds) => nds.map((node) => {
|
||||
|
|
@ -423,6 +525,27 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
if (change.type === 'remove') {
|
||||
const edge = edgesRef.current.find(e => e.id === change.id)
|
||||
if (edge?.data) {
|
||||
// Source edge removal
|
||||
if (edge.id?.startsWith('source-')) {
|
||||
setNodes((nds) => nds.map((node) => {
|
||||
if (node.id !== edge.source || node.type !== 'source') return node
|
||||
const data = node.data as SourceNodeData
|
||||
const filtered = (data.targetAllocations || []).filter(a => a.targetId !== edge.target)
|
||||
const total = filtered.reduce((s, a) => s + a.percentage, 0)
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
targetAllocations: total > 0
|
||||
? filtered.map(a => ({ ...a, percentage: Math.round((a.percentage / total) * 100) }))
|
||||
: filtered,
|
||||
},
|
||||
}
|
||||
}))
|
||||
onEdgesChange([change])
|
||||
return
|
||||
}
|
||||
|
||||
setNodes((nds) => nds.map((node) => {
|
||||
if (node.id !== edge.source || node.type !== 'funnel') return node
|
||||
const data = node.data as FunnelNodeData
|
||||
|
|
@ -524,17 +647,129 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
])
|
||||
}, [setNodes, screenToFlowPosition])
|
||||
|
||||
// Simulation — real flow logic (inflow → overflow → spending → outcomes)
|
||||
// Add source node at viewport center
|
||||
const addSource = useCallback(() => {
|
||||
const pos = screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 - 100 })
|
||||
const newId = `source-${Date.now()}`
|
||||
setNodes((nds) => [
|
||||
...nds,
|
||||
{
|
||||
id: newId,
|
||||
type: 'source',
|
||||
position: pos,
|
||||
data: {
|
||||
label: 'New Source',
|
||||
flowRate: 500,
|
||||
sourceType: 'recurring',
|
||||
targetAllocations: [],
|
||||
} as SourceNodeData,
|
||||
},
|
||||
])
|
||||
}, [setNodes, screenToFlowPosition])
|
||||
|
||||
// Handle node deletion — clean up references in other nodes
|
||||
const onNodesDelete = useCallback((deletedNodes: FlowNode[]) => {
|
||||
const deletedIds = new Set(deletedNodes.map(n => n.id))
|
||||
|
||||
setNodes((nds) => nds.map((node) => {
|
||||
if (node.type === 'source') {
|
||||
const data = node.data as SourceNodeData
|
||||
const filtered = (data.targetAllocations || []).filter(a => !deletedIds.has(a.targetId))
|
||||
if (filtered.length === data.targetAllocations?.length) return node
|
||||
const total = filtered.reduce((s, a) => s + a.percentage, 0)
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
targetAllocations: total > 0
|
||||
? filtered.map(a => ({ ...a, percentage: Math.round((a.percentage / total) * 100) }))
|
||||
: filtered,
|
||||
},
|
||||
}
|
||||
}
|
||||
if (node.type === 'funnel') {
|
||||
const data = node.data as FunnelNodeData
|
||||
let changed = false
|
||||
|
||||
let overflow = data.overflowAllocations || []
|
||||
const filteredOverflow = overflow.filter(a => !deletedIds.has(a.targetId))
|
||||
if (filteredOverflow.length !== overflow.length) {
|
||||
changed = true
|
||||
const total = filteredOverflow.reduce((s, a) => s + a.percentage, 0)
|
||||
overflow = total > 0
|
||||
? filteredOverflow.map(a => ({ ...a, percentage: Math.round((a.percentage / total) * 100) }))
|
||||
: filteredOverflow
|
||||
}
|
||||
|
||||
let spending = data.spendingAllocations || []
|
||||
const filteredSpending = spending.filter(a => !deletedIds.has(a.targetId))
|
||||
if (filteredSpending.length !== spending.length) {
|
||||
changed = true
|
||||
const total = filteredSpending.reduce((s, a) => s + a.percentage, 0)
|
||||
spending = total > 0
|
||||
? filteredSpending.map(a => ({ ...a, percentage: Math.round((a.percentage / total) * 100) }))
|
||||
: filteredSpending
|
||||
}
|
||||
|
||||
if (!changed) return node
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
overflowAllocations: overflow,
|
||||
spendingAllocations: spending,
|
||||
},
|
||||
}
|
||||
}
|
||||
return node
|
||||
}))
|
||||
}, [setNodes])
|
||||
|
||||
// Simulation
|
||||
useEffect(() => {
|
||||
if (!isSimulating) return
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setNodes((nds) => simulateTick(nds as FlowNode[]))
|
||||
}, 1000)
|
||||
setNodes((nds) =>
|
||||
nds.map((node) => {
|
||||
if (node.type === 'funnel') {
|
||||
const data = node.data as FunnelNodeData
|
||||
const change = (Math.random() - 0.45) * 300
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
currentValue: Math.max(0, Math.min(data.maxCapacity * 1.1, data.currentValue + change)),
|
||||
},
|
||||
}
|
||||
} else if (node.type === 'outcome') {
|
||||
const data = node.data as OutcomeNodeData
|
||||
const change = Math.random() * 80
|
||||
const newReceived = Math.min(data.fundingTarget * 1.05, data.fundingReceived + change)
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...data,
|
||||
fundingReceived: newReceived,
|
||||
status: newReceived >= data.fundingTarget ? 'completed' :
|
||||
data.status === 'not-started' && newReceived > 0 ? 'in-progress' : data.status,
|
||||
},
|
||||
}
|
||||
}
|
||||
return node
|
||||
})
|
||||
)
|
||||
}, 500)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [isSimulating, setNodes])
|
||||
|
||||
// Auto-collapse title & legend panels after 5 seconds
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setPanelsCollapsed(true), 5000)
|
||||
return () => clearTimeout(timer)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
<ReactFlow
|
||||
|
|
@ -542,11 +777,13 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
edges={edges}
|
||||
onNodesChange={onNodesChangeHandler}
|
||||
onEdgesChange={handleEdgesChange}
|
||||
onNodesDelete={onNodesDelete}
|
||||
onConnect={onConnect}
|
||||
onReconnect={onReconnect}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
edgesReconnectable={true}
|
||||
deleteKeyCode={['Backspace', 'Delete']}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.15 }}
|
||||
className="bg-slate-50"
|
||||
|
|
@ -558,42 +795,60 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
<Controls className="bg-white border border-slate-200 rounded-lg shadow-sm" />
|
||||
|
||||
{/* Title Panel */}
|
||||
<Panel position="top-left" className="bg-white rounded-lg shadow-lg border border-slate-200 p-4 m-4">
|
||||
<h1 className="text-lg font-bold text-slate-800">Threshold-Based Flow Funding</h1>
|
||||
<p className="text-xs text-slate-500 mt-1">
|
||||
<span className="text-emerald-600">Inflows</span> (top) •
|
||||
<span className="text-amber-600 ml-1">Overflow</span> (sides) •
|
||||
<span className="text-blue-600 ml-1">Spending</span> (bottom)
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400 mt-1">
|
||||
Drag handles to connect • Double-click funnels to edit • Select + Delete to remove edges
|
||||
</p>
|
||||
<Panel position="top-left" className="m-4">
|
||||
<div
|
||||
className="bg-white rounded-lg shadow-lg border border-slate-200 cursor-pointer transition-all duration-300 overflow-hidden"
|
||||
onClick={() => setPanelsCollapsed((c) => !c)}
|
||||
>
|
||||
<div className="px-4 py-2 flex items-center gap-2">
|
||||
<h1 className="text-sm font-bold text-slate-800">TBFF</h1>
|
||||
<svg className={`w-3 h-3 text-slate-400 transition-transform duration-300 ${panelsCollapsed ? '' : 'rotate-180'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
{!panelsCollapsed && (
|
||||
<div className="px-4 pb-3 border-t border-slate-100 pt-2">
|
||||
<p className="text-xs text-slate-500">
|
||||
<span className="text-emerald-600">Sources</span> →
|
||||
<span className="text-amber-600 ml-1">Funnels</span> →
|
||||
<span className="text-pink-600 ml-1">Outcomes</span>
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400 mt-1">
|
||||
Drag handles to connect • Double-click to edit • Select + Delete to remove
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
{/* Top-right Controls */}
|
||||
<Panel position="top-right" className="m-4 flex gap-2">
|
||||
{mode === 'space' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setShowIntegrations(true)}
|
||||
className="px-3 py-2 rounded-lg font-medium shadow-sm text-sm bg-indigo-500 text-white hover:bg-indigo-600 transition-all"
|
||||
>
|
||||
Link Data
|
||||
</button>
|
||||
<button
|
||||
onClick={addFunnel}
|
||||
className="px-3 py-2 rounded-lg font-medium shadow-sm text-sm bg-amber-500 text-white hover:bg-amber-600 transition-all"
|
||||
>
|
||||
+ Funnel
|
||||
</button>
|
||||
<button
|
||||
onClick={addOutcome}
|
||||
className="px-3 py-2 rounded-lg font-medium shadow-sm text-sm bg-pink-500 text-white hover:bg-pink-600 transition-all"
|
||||
>
|
||||
+ Outcome
|
||||
</button>
|
||||
</>
|
||||
<button
|
||||
onClick={() => setShowIntegrations(true)}
|
||||
className="px-3 py-2 rounded-lg font-medium shadow-sm text-sm bg-indigo-500 text-white hover:bg-indigo-600 transition-all"
|
||||
>
|
||||
Link Data
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={addSource}
|
||||
className="px-3 py-2 rounded-lg font-medium shadow-sm text-sm bg-emerald-500 text-white hover:bg-emerald-600 transition-all"
|
||||
>
|
||||
+ Source
|
||||
</button>
|
||||
<button
|
||||
onClick={addFunnel}
|
||||
className="px-3 py-2 rounded-lg font-medium shadow-sm text-sm bg-amber-500 text-white hover:bg-amber-600 transition-all"
|
||||
>
|
||||
+ Funnel
|
||||
</button>
|
||||
<button
|
||||
onClick={addOutcome}
|
||||
className="px-3 py-2 rounded-lg font-medium shadow-sm text-sm bg-pink-500 text-white hover:bg-pink-600 transition-all"
|
||||
>
|
||||
+ Outcome
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsSimulating(!isSimulating)}
|
||||
className={`px-4 py-2 rounded-lg font-medium shadow-sm transition-all text-sm ${
|
||||
|
|
@ -607,28 +862,59 @@ function FlowCanvasInner({ initialNodes: initNodes, mode, onNodesChange, integra
|
|||
</Panel>
|
||||
|
||||
{/* Legend */}
|
||||
<Panel position="bottom-left" className="bg-white rounded-lg shadow-lg border border-slate-200 p-3 m-4">
|
||||
<div className="text-[10px] font-medium text-slate-500 uppercase tracking-wide mb-2">Flow Types</div>
|
||||
<div className="space-y-1.5 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500" />
|
||||
<span className="text-slate-600">Inflows (top)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-amber-500" />
|
||||
<span className="text-slate-600">Overflow (sides)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-blue-500" />
|
||||
<span className="text-slate-600">Spending (bottom)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-green-500 border border-dashed border-green-700" />
|
||||
<span className="text-slate-600">Stream (Superfluid)</span>
|
||||
</div>
|
||||
<div className="border-t border-slate-200 pt-1.5 mt-1.5">
|
||||
<span className="text-[10px] text-slate-400">Edge width = relative flow amount</span>
|
||||
<Panel position="bottom-left" className="m-4">
|
||||
<div
|
||||
className="bg-white rounded-lg shadow-lg border border-slate-200 cursor-pointer transition-all duration-300 overflow-hidden"
|
||||
onClick={() => setPanelsCollapsed((c) => !c)}
|
||||
>
|
||||
<div className="px-3 py-2 flex items-center gap-2">
|
||||
<div className="text-[10px] font-medium text-slate-500 uppercase tracking-wide">Legend</div>
|
||||
{panelsCollapsed && (
|
||||
<div className="flex items-center gap-1 ml-1">
|
||||
<div className="w-2 h-2 rounded-sm bg-emerald-500" />
|
||||
<div className="w-2 h-2 rounded-sm bg-amber-500" />
|
||||
<div className="w-2 h-2 rounded-sm bg-pink-500" />
|
||||
</div>
|
||||
)}
|
||||
<svg className={`w-3 h-3 text-slate-400 transition-transform duration-300 ${panelsCollapsed ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
{!panelsCollapsed && (
|
||||
<div className="px-3 pb-3 border-t border-slate-100 pt-2">
|
||||
<div className="space-y-1.5 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-emerald-500" />
|
||||
<span className="text-slate-600">Source (funding origin)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-amber-500" />
|
||||
<span className="text-slate-600">Funnel (threshold pool)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded bg-pink-500" />
|
||||
<span className="text-slate-600">Outcome (deliverable)</span>
|
||||
</div>
|
||||
<div className="border-t border-slate-200 pt-1.5 mt-1.5 space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-0.5 bg-emerald-500" />
|
||||
<span className="text-slate-600">Source flow</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-0.5 bg-amber-500" />
|
||||
<span className="text-slate-600">Overflow (sides)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-0.5 bg-blue-500" />
|
||||
<span className="text-slate-600">Spending (down)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-slate-200 pt-1.5 mt-1.5">
|
||||
<span className="text-[10px] text-slate-400">Edge width = relative flow • Select + Delete to remove</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
</ReactFlow>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,208 @@
|
|||
'use client'
|
||||
|
||||
import { memo, useState, useCallback } from 'react'
|
||||
import { Handle, Position, useReactFlow } from '@xyflow/react'
|
||||
import type { NodeProps } from '@xyflow/react'
|
||||
import type { SourceNodeData } from '@/lib/types'
|
||||
|
||||
const SOURCE_COLORS = ['#10b981', '#14b8a6', '#06b6d4', '#0ea5e9']
|
||||
|
||||
function SourceNode({ data, selected, id }: NodeProps) {
|
||||
const nodeData = data as SourceNodeData
|
||||
const { label, flowRate, sourceType, targetAllocations = [] } = nodeData
|
||||
const { setNodes } = useReactFlow()
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [editLabel, setEditLabel] = useState(label)
|
||||
const [editRate, setEditRate] = useState(String(flowRate))
|
||||
const [editType, setEditType] = useState(sourceType)
|
||||
|
||||
const handleDoubleClick = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
setEditLabel(label)
|
||||
setEditRate(String(flowRate))
|
||||
setEditType(sourceType)
|
||||
setIsEditing(true)
|
||||
}, [label, flowRate, sourceType])
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
setNodes((nds) => nds.map((node) => {
|
||||
if (node.id !== id) return node
|
||||
return {
|
||||
...node,
|
||||
data: {
|
||||
...(node.data as SourceNodeData),
|
||||
label: editLabel.trim() || 'Source',
|
||||
flowRate: Math.max(0, Number(editRate) || 0),
|
||||
sourceType: editType,
|
||||
},
|
||||
}
|
||||
}))
|
||||
setIsEditing(false)
|
||||
}, [id, editLabel, editRate, editType, setNodes])
|
||||
|
||||
const typeLabels = {
|
||||
'recurring': 'Recurring',
|
||||
'one-time': 'One-time',
|
||||
'treasury': 'Treasury',
|
||||
}
|
||||
|
||||
const typeColors = {
|
||||
'recurring': 'bg-emerald-100 text-emerald-700',
|
||||
'one-time': 'bg-blue-100 text-blue-700',
|
||||
'treasury': 'bg-violet-100 text-violet-700',
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`
|
||||
bg-white rounded-xl shadow-lg border-2 min-w-[180px] max-w-[220px]
|
||||
transition-all duration-200
|
||||
${selected ? 'border-emerald-500 shadow-emerald-200' : 'border-slate-200'}
|
||||
`}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="px-3 py-2 border-b border-slate-100 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-t-[10px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-emerald-500 rounded flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="font-semibold text-slate-800 text-sm truncate">{label}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`text-[10px] px-2 py-0.5 rounded-full font-medium uppercase tracking-wide ${typeColors[sourceType]}`}>
|
||||
{typeLabels[sourceType]}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<span className="text-lg font-bold font-mono text-emerald-600">
|
||||
${flowRate.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 ml-1">/mo</span>
|
||||
</div>
|
||||
|
||||
{/* Allocation bars */}
|
||||
{targetAllocations.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[8px] text-emerald-600 uppercase w-10">Flow</span>
|
||||
<div className="flex-1 flex h-2 rounded overflow-hidden">
|
||||
{targetAllocations.map((alloc, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="transition-all"
|
||||
style={{
|
||||
backgroundColor: alloc.color || SOURCE_COLORS[idx % SOURCE_COLORS.length],
|
||||
width: `${alloc.percentage}%`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Flow indicator */}
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<svg className="w-3 h-3 text-emerald-500" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 16l6-6h-4V4h-4v6H6z"/>
|
||||
</svg>
|
||||
<span className="text-[9px] text-emerald-500 uppercase font-medium">Outflow</span>
|
||||
<svg className="w-3 h-3 text-emerald-500" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 16l6-6h-4V4h-4v6H6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<span className="text-[8px] text-slate-400">Double-click to edit</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom handle — connects to funnel top */}
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
id="source-out"
|
||||
className="!w-4 !h-4 !bg-emerald-500 !border-2 !border-white !-bottom-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Edit Modal */}
|
||||
{isEditing && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
onClick={() => setIsEditing(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-2xl p-6 w-80"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-bold text-slate-800">Edit Source</h3>
|
||||
<button onClick={() => setIsEditing(false)} className="text-slate-400 hover:text-slate-600">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 uppercase tracking-wide block mb-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editLabel}
|
||||
onChange={(e) => setEditLabel(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-800"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 uppercase tracking-wide block mb-1">Flow Rate ($/mo)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={editRate}
|
||||
onChange={(e) => setEditRate(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-800 font-mono"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 uppercase tracking-wide block mb-1">Type</label>
|
||||
<select
|
||||
value={editType}
|
||||
onChange={(e) => setEditType(e.target.value as SourceNodeData['sourceType'])}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-800"
|
||||
>
|
||||
<option value="recurring">Recurring</option>
|
||||
<option value="one-time">One-time</option>
|
||||
<option value="treasury">Treasury</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-6">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-6 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition-colors font-medium"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(SourceNode)
|
||||
|
|
@ -1,12 +1,27 @@
|
|||
import type { FlowNode, FunnelNodeData, OutcomeNodeData } from './types'
|
||||
import type { FlowNode, FunnelNodeData, OutcomeNodeData, SourceNodeData } from './types'
|
||||
|
||||
// Colors for allocations
|
||||
export const SPENDING_COLORS = ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4', '#10b981', '#6366f1']
|
||||
export const OVERFLOW_COLORS = ['#f59e0b', '#ef4444', '#f97316', '#eab308', '#dc2626', '#ea580c']
|
||||
export const SOURCE_COLORS = ['#10b981', '#14b8a6', '#06b6d4', '#0ea5e9']
|
||||
|
||||
// Demo preset: Treasury → 3 sub-funnels → 7 outcomes
|
||||
// Demo preset: Source → Treasury → 3 sub-funnels → 7 outcomes
|
||||
export const demoNodes: FlowNode[] = [
|
||||
// Main Treasury Funnel (top center)
|
||||
// Revenue source (top)
|
||||
{
|
||||
id: 'revenue',
|
||||
type: 'source',
|
||||
position: { x: 660, y: -200 },
|
||||
data: {
|
||||
label: 'Revenue Stream',
|
||||
flowRate: 5000,
|
||||
sourceType: 'recurring',
|
||||
targetAllocations: [
|
||||
{ targetId: 'treasury', percentage: 100, color: '#10b981' },
|
||||
],
|
||||
} as SourceNodeData,
|
||||
},
|
||||
// Main Treasury Funnel
|
||||
{
|
||||
id: 'treasury',
|
||||
type: 'funnel',
|
||||
|
|
|
|||
18
lib/types.ts
18
lib/types.ts
|
|
@ -83,6 +83,22 @@ export interface FundingSource {
|
|||
lastUsedAt?: number;
|
||||
}
|
||||
|
||||
// ─── Source Node Types ───────────────────────────────────────
|
||||
|
||||
export interface SourceAllocation {
|
||||
targetId: string
|
||||
percentage: number // 0-100
|
||||
color: string
|
||||
}
|
||||
|
||||
export interface SourceNodeData {
|
||||
label: string
|
||||
flowRate: number // tokens per month flowing out
|
||||
sourceType: 'recurring' | 'one-time' | 'treasury'
|
||||
targetAllocations: SourceAllocation[]
|
||||
[key: string]: unknown
|
||||
}
|
||||
|
||||
// ─── Core Flow Types ─────────────────────────────────────────
|
||||
|
||||
// Overflow allocation - funds flowing to OTHER FUNNELS when above max threshold
|
||||
|
|
@ -129,7 +145,7 @@ export interface OutcomeNodeData {
|
|||
[key: string]: unknown
|
||||
}
|
||||
|
||||
export type FlowNode = Node<FunnelNodeData | OutcomeNodeData>
|
||||
export type FlowNode = Node<FunnelNodeData | OutcomeNodeData | SourceNodeData>
|
||||
|
||||
export interface AllocationEdgeData {
|
||||
allocation: number // percentage 0-100
|
||||
|
|
|
|||
Loading…
Reference in New Issue