debug: Add extensive logging to PlaceholderPicker
**Issue Investigation:** User reports: 1. Backend placeholders (120+) not appearing 2. Node names showing as 'node_2' instead of 'Körper-Analyse (node_2)' **Debug Changes:** - Console logging for backend API call - Log catalog structure and keys - Log flattened placeholders count - Error state displayed in UI (not just console) - Log each node extraction with label/data - Safe navigation operator for node.data?.label **Expected Console Output:** 🔄 Loading placeholders from backend... ✅ Catalog received: {...} 📊 Catalog keys: ['Profil', 'Körper', ...] 📁 Category "Profil": 10 items ✅ Loaded 120 system placeholders 🔍 Extracting workflow placeholders from nodes: [...] 📦 Node node_2: {label: 'Körper-Analyse', ...} ➕ Adding placeholder: {{ node_2.analysis_core }} → "Körper-Analyse (node_2) - Hauptausgabe" Next: Check browser console for error messages Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b779c2f2a8
commit
d2eaab277e
|
|
@ -20,15 +20,25 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
|
||||||
const [searchQuery, setSearchQuery] = useState('')
|
const [searchQuery, setSearchQuery] = useState('')
|
||||||
const [systemPlaceholders, setSystemPlaceholders] = useState([])
|
const [systemPlaceholders, setSystemPlaceholders] = useState([])
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
|
const [loadError, setLoadError] = useState(null)
|
||||||
|
|
||||||
// Lade Backend-Platzhalter beim Mount
|
// Lade Backend-Platzhalter beim Mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function loadPlaceholders() {
|
async function loadPlaceholders() {
|
||||||
try {
|
try {
|
||||||
|
console.log('🔄 Loading placeholders from backend...')
|
||||||
const catalog = await api.listPlaceholders()
|
const catalog = await api.listPlaceholders()
|
||||||
|
console.log('✅ Catalog received:', catalog)
|
||||||
|
console.log('📊 Catalog keys:', Object.keys(catalog))
|
||||||
|
|
||||||
// Konvertiere Katalog zu Flat-Liste
|
// Konvertiere Katalog zu Flat-Liste
|
||||||
const flattened = []
|
const flattened = []
|
||||||
Object.entries(catalog).forEach(([category, items]) => {
|
Object.entries(catalog).forEach(([category, items]) => {
|
||||||
|
console.log(`📁 Category "${category}": ${items?.length || 0} items`)
|
||||||
|
if (!Array.isArray(items)) {
|
||||||
|
console.warn(`⚠️ Category "${category}" items is not an array:`, items)
|
||||||
|
return
|
||||||
|
}
|
||||||
items.forEach(item => {
|
items.forEach(item => {
|
||||||
flattened.push({
|
flattened.push({
|
||||||
placeholder: `{{ ${item.key.trim()} }}`,
|
placeholder: `{{ ${item.key.trim()} }}`,
|
||||||
|
|
@ -39,9 +49,11 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
console.log(`✅ Loaded ${flattened.length} system placeholders`)
|
||||||
setSystemPlaceholders(flattened)
|
setSystemPlaceholders(flattened)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('Failed to load placeholders:', e)
|
console.error('❌ Failed to load placeholders:', e)
|
||||||
|
setLoadError(e.message)
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
|
|
@ -188,6 +200,20 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
|
||||||
>
|
>
|
||||||
Lade Platzhalter...
|
Lade Platzhalter...
|
||||||
</div>
|
</div>
|
||||||
|
) : loadError ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: '24px',
|
||||||
|
textAlign: 'center',
|
||||||
|
color: 'var(--danger)',
|
||||||
|
fontSize: '14px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
❌ Fehler beim Laden: {loadError}
|
||||||
|
<div style={{ marginTop: '12px', fontSize: '12px', color: 'var(--text3)' }}>
|
||||||
|
Workflow-Platzhalter sind trotzdem verfügbar.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
) : Object.keys(grouped).length === 0 ? (
|
) : Object.keys(grouped).length === 0 ? (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -319,17 +345,28 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
|
||||||
function extractWorkflowPlaceholders(nodes) {
|
function extractWorkflowPlaceholders(nodes) {
|
||||||
const placeholders = []
|
const placeholders = []
|
||||||
|
|
||||||
|
console.log('🔍 Extracting workflow placeholders from nodes:', nodes)
|
||||||
|
|
||||||
nodes.forEach(node => {
|
nodes.forEach(node => {
|
||||||
if (node.type === 'end') return // End Node hat keine Outputs
|
if (node.type === 'end') return // End Node hat keine Outputs
|
||||||
|
|
||||||
const nodeId = node.id
|
const nodeId = node.id
|
||||||
const nodeLabel = node.data.label || nodeId
|
const nodeLabel = node.data?.label || nodeId
|
||||||
|
|
||||||
|
console.log(`📦 Node ${nodeId}:`, {
|
||||||
|
type: node.type,
|
||||||
|
label: node.data?.label,
|
||||||
|
nodeLabel: nodeLabel,
|
||||||
|
data: node.data
|
||||||
|
})
|
||||||
|
|
||||||
// analysis_core für alle Analysis/Logic/Join Nodes
|
// analysis_core für alle Analysis/Logic/Join Nodes
|
||||||
if (node.type === 'analysis' || node.type === 'logic' || node.type === 'join') {
|
if (node.type === 'analysis' || node.type === 'logic' || node.type === 'join') {
|
||||||
|
const desc = `${nodeLabel} (${nodeId}) - Hauptausgabe`
|
||||||
|
console.log(` ➕ Adding placeholder: {{ ${nodeId}.analysis_core }} → "${desc}"`)
|
||||||
placeholders.push({
|
placeholders.push({
|
||||||
placeholder: `{{ ${nodeId}.analysis_core }}`,
|
placeholder: `{{ ${nodeId}.analysis_core }}`,
|
||||||
description: `${nodeLabel} (${nodeId}) - Hauptausgabe`,
|
description: desc,
|
||||||
icon: getNodeIcon(node.type),
|
icon: getNodeIcon(node.type),
|
||||||
category: 'Workflow - Node Outputs'
|
category: 'Workflow - Node Outputs'
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user