Error rendering diagram: ${error.message}

`;\n }\n };\n\n const generateMermaidCode = (): string => {\n let code = 'flowchart TD\\n';\n const nodeIds: { [name: string]: string } = {};\n let nodeCounter = 0;\n\n // Generate unique IDs for each person\n Object.keys(influenceMap).forEach(name => {\n nodeIds[name] = `N${nodeCounter++}`;\n });\n\n // Add nodes with styling based on layer\n Object.values(influenceMap).forEach(person => {\n const nodeId = nodeIds[person.name];\n const displayName = person.name.length > 20 ? \n person.name.substring(0, 20) + '...' : person.name;\n \n if (person.layer === 0) {\n code += ` ${nodeId}[\"${displayName}\"]:::you\\n`;\n } else if (person.processed) {\n code += ` ${nodeId}[\"${displayName}\"]:::processed\\n`;\n } else {\n code += ` ${nodeId}[\"${displayName}\"]:::unprocessed\\n`;\n }\n });\n\n // Add edges with relationship labels\n Object.values(influenceMap).forEach(person => {\n const fromId = nodeIds[person.name];\n person.influences.forEach(influence => {\n const toId = nodeIds[influence.name];\n if (toId) {\n const relationship = influence.relationship.length > 50 ? \n influence.relationship.substring(0, 50) + '...' : influence.relationship;\n code += ` ${toId} --> ${fromId}\\n`;\n code += ` ${toId} -.->|\"${relationship}\"| ${fromId}\\n`;\n }\n });\n });\n\n // Add styling\n code += `\n classDef you fill:#e1f5fe,stroke:#01579b,stroke-width:3px\n classDef processed fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px\n classDef unprocessed fill:#fff3e0,stroke:#ef6c00,stroke-width:2px,stroke-dasharray: 5 5\n `;\n\n return code;\n };\n\n return (\n

\n Influence Mapper\n

\n\n {/* Input Section */}\n

\n \n Your Name\n \n setYourName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Enter your name\"\n />\n

\n\n

\n \n Your Main Influences (5-10 people)\n \n {influences.map((influence, index) => (\n

\n updateInfluence(index, e.target.value)}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Enter name of influence\"\n />\n {influences.length > 1 && (\n removeInfluenceField(index)}\n className=\"ml-2 px-3 py-2 bg-red-500 text-white rounded-md hover:bg-red-600\"\n >\n ×\n \n )}\n

\n ))}\n \n {influences.length < 10 && (\n \n Add Another Influence\n \n )}\n

\n\n

\n \n {loading ? 'Generating...' : 'Generate Initial Map'}\n \n\n {Object.keys(influenceMap).length > 0 && (\n \n {loading ? 'Expanding...' : `Expand Layer ${currentLayer}`}\n \n )}\n\n setShowLogs(!showLogs)}\n className=\"px-6 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600\"\n >\n {showLogs ? 'Hide' : 'Show'} Debug Logs\n \n\n setShowRelationships(!showRelationships)}\n className=\"px-6 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600\"\n >\n {showRelationships ? 'Hide' : 'Show'} Relationships\n \n\n {Object.keys(influenceMap).length > 0 && (\n \n Reset Map\n \n )}\n

\n\n {/* Mermaid Diagram */}\n {Object.keys(influenceMap).length > 0 && (\n

Influence Map

\n You\n

\n Processed\n

\n Unprocessed\n

\n )}\n\n {/* Relationships Panel */}\n {showRelationships && Object.keys(influenceMap).length > 0 && (\n

Influence Relationships

\n {Object.values(influenceMap)\n .filter(person => person.influences.length > 0)\n .map(person => (\n

{person.name}

\n {person.influences.map((influence, index) => (\n

← {influence.name}

{influence.relationship}

\n ))}\n

\n )}\n\n {/* Debug Logs */}\n {showLogs && logs.length > 0 && (\n

Debug Logs

\n {logs.map((log, index) => (\n

{log.person}

\n {log.timestamp}\n

\n \n {log.error && (\n

\n Error: {log.error}\n

\n )}\n \n

Prompt

\n                    {log.prompt}\n

\n \n

Response

\n                    {log.response}\n

\n \n {log.parsed && (\n

Parsed Influences

\n {log.parsed.map((influence, i) => (\n

{influence.name}

{influence.relationship}

\n ))}\n

\n )}\n

\n ))}\n

\n )}\n

\n );\n}","deleted","label",[168,149],"frontend","permalink","https://www.val.town/x/malcolmocean/influence-mapper2/code/frontend/app.tsx","extension","actionData","errors"]