64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import React, { useContext, useMemo } from 'react'
|
|
import { GraphContext } from '@/lib/graph/flowContext'
|
|
import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
|
|
import { NodeHelpPopover } from '@/components/graph/NodeHelpPopover'
|
|
import { getNodeType, getNodeClassificationLabel } from '@/lib/graph/nodeRegistry'
|
|
|
|
type Props = {
|
|
nodeId: string
|
|
nodeType: string
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
export function NodeFooterEdgeIndicators({ nodeId, nodeType, children }: Props) {
|
|
const ctx = useContext(GraphContext)
|
|
const edges = ctx?.edges ?? []
|
|
|
|
const { inputs, outputs } = useMemo(() => {
|
|
let inputs = 0
|
|
let outputs = 0
|
|
for (const e of edges) {
|
|
if (e.target === nodeId) inputs += 1
|
|
if (e.source === nodeId) outputs += 1
|
|
}
|
|
return { inputs, outputs }
|
|
}, [edges, nodeId])
|
|
|
|
const descriptor = getNodeType(nodeType)
|
|
const showInput = descriptor?.hasInput ?? false
|
|
const showOutput = descriptor?.hasOutput ?? false
|
|
const classificationLabel = getNodeClassificationLabel(nodeType)
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 w-full text-xs text-muted-foreground">
|
|
{showInput && (
|
|
<span className="flex items-center gap-1 shrink-0" title="Input connections">
|
|
<ArrowDownLeft className="size-3.5" />
|
|
<span>{inputs}</span>
|
|
</span>
|
|
)}
|
|
{showOutput && (
|
|
<span className="flex items-center gap-1 shrink-0" title="Output connections">
|
|
<ArrowUpRight className="size-3.5" />
|
|
<span>{outputs}</span>
|
|
</span>
|
|
)}
|
|
{children != null && (
|
|
<>
|
|
{(showInput || showOutput) && <span className="shrink-0">|</span>}
|
|
<span className="min-w-0 truncate">{children}</span>
|
|
</>
|
|
)}
|
|
{classificationLabel != null && (
|
|
<>
|
|
{(showInput || showOutput || children != null) && <span className="shrink-0">|</span>}
|
|
<span className="shrink-0" title="Node classification">{classificationLabel}</span>
|
|
</>
|
|
)}
|
|
<span className="shrink-0 ml-auto">
|
|
<NodeHelpPopover nodeType={nodeType} />
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|