-
{data.label}
-
Custom content
+
+
+
{data.label}
+
ID: {data?.id ?? ''}
+
-
+
Custom content
-
+
+
+
+
+
)
}
diff --git a/src/components/RenderingNode.tsx b/src/components/RenderingNode.tsx
new file mode 100644
index 0000000..9146d54
--- /dev/null
+++ b/src/components/RenderingNode.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { Handle, Position } from 'reactflow'
+import yaml from 'js-yaml'
+import FlowContext from '../lib/flowContext'
+
+type Props = {
+ id: string
+ data: any
+}
+
+export default function RenderingNode({ id }: Props) {
+ const [output, setOutput] = React.useState
('')
+
+ const ctx = React.useContext(FlowContext)
+ const nodes = ctx?.nodes ?? []
+ const edges = ctx?.edges ?? []
+
+ const incomingEdges = edges.filter((e: any) => e.target === id)
+ const incomingIds = incomingEdges.map((e: any) => e.source).sort()
+ const srcId = incomingIds.length > 0 ? incomingIds[0] : null
+ const srcNode = nodes.find((n: any) => n.id === srcId)
+ const yamlText = srcNode && srcNode.type === 'config' ? srcNode?.data?.yaml ?? '' : ''
+
+ React.useEffect(() => {
+ // debug
+ // eslint-disable-next-line no-console
+ console.debug('RenderingNode:selection', { id, incomingIds, srcNode: srcNode ? { id: srcNode.id, type: srcNode.type, yaml: (srcNode.data?.yaml ?? '').slice(0, 60) } : null })
+
+ if (!yamlText) {
+ if (incomingIds.length === 0) {
+ setOutput(`No configuration connected (nodes: ${nodes.length}, edges: ${edges.length})`)
+ return
+ }
+ setOutput('No YAML found on connected configuration node')
+ return
+ }
+
+ try {
+ const parsed = yaml.load(yamlText)
+ const newOutput = JSON.stringify(parsed, null, 2)
+ setOutput((prev) => (prev === newOutput ? prev : newOutput))
+ } catch (err: any) {
+ const msg = 'YAML parse error: ' + err.message
+ setOutput((prev) => (prev === msg ? prev : msg))
+ }
+ }, [id, incomingIds.join(','), yamlText, nodes.length, edges.length])
+
+ return (
+
+
Rendering
+
{output}
+
+