Spaces:
Running
Running
File size: 3,857 Bytes
c2ea5ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
/**
* Ultra-simple, single-line SVG designs for reliable rendering
*/
const iconSVGs: Record<string, string> = {
Bot: `<circle cx="12" cy="12" r="10" fill="white"/><rect x="8" y="6" width="8" height="6" rx="1" fill="#ef4444"/><circle cx="10" cy="8" r="0.8" fill="white"/><circle cx="14" cy="8" r="0.8" fill="white"/><rect x="9" y="10" width="6" height="1" fill="white"/><rect x="7" y="13" width="2" height="4" fill="#ef4444"/><rect x="15" y="13" width="2" height="4" fill="#ef4444"/>`,
User: `<circle cx="12" cy="12" r="10" fill="white"/><circle cx="12" cy="8" r="2.5" fill="#ec4899"/><rect x="8.5" y="12" width="7" height="6" rx="1" fill="#ec4899"/>`,
Wrench: `<circle cx="12" cy="12" r="10" fill="white"/><circle cx="12" cy="12" r="5" fill="#10b981"/><circle cx="12" cy="12" r="2" fill="white"/><rect x="10" y="5" width="4" height="3" rx="1" fill="#10b981"/><rect x="10" y="16" width="4" height="3" rx="1" fill="#10b981"/><rect x="5" y="10" width="3" height="4" rx="1" fill="#10b981"/><rect x="16" y="10" width="3" height="4" rx="1" fill="#10b981"/>`,
FileText: `<circle cx="12" cy="12" r="10" fill="white"/><rect x="7" y="7" width="10" height="10" rx="1" fill="#3b82f6"/><polyline points="9,12 11,14 15,10" stroke="white" stroke-width="2" fill="none"/>`,
Upload: `<circle cx="12" cy="12" r="10" fill="white"/><path d="M12,8 L16,8 L16,16 L12,16" fill="none" stroke="#8b5cf6" stroke-width="2"/><rect x="7" y="11" width="5" height="2" fill="#8b5cf6"/><polygon points="14,12 9,9 9,15" fill="#8b5cf6"/>`,
Download: `<circle cx="12" cy="12" r="10" fill="white"/><path d="M12,8 L8,8 L8,16 L12,16" fill="none" stroke="#f59e0b" stroke-width="2"/><rect x="11" y="11" width="5" height="2" fill="#f59e0b"/><polygon points="18,12 13,9 13,15" fill="#f59e0b"/>`,
Users: `<circle cx="9" cy="8" r="2" fill="#10b981"/><circle cx="15" cy="8" r="2" fill="#10b981"/><rect x="6" y="12" width="6" height="4" rx="1" fill="#10b981"/><rect x="12" y="12" width="6" height="4" rx="1" fill="#10b981"/>`,
Circle: `<circle cx="12" cy="12" r="6" fill="#06b6d4"/>`,
};
/**
* Convert an icon name to an SVG data URI for use in Cytoscape
*/
function createIconDataUri(iconName: string, size: number = 48): string {
const iconContent = iconSVGs[iconName] || iconSVGs.Circle;
// Create compact SVG without extra whitespace
const svg = `<svg width="${size}" height="${size}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${iconContent}</svg>`;
// Use URL encoding instead of base64 for better compatibility
const dataUri = `data:image/svg+xml,${encodeURIComponent(svg)}`;
// Debug logging to help diagnose issues
console.log(`🎨 Icon ${iconName}:`, {
svgLength: svg.length,
dataUriLength: dataUri.length,
dataUriPreview: dataUri.substring(0, 80) + "...",
});
return dataUri;
}
/**
* Get the appropriate icon for a node type
*/
export function getNodeIcon(type?: string): string {
const iconMap: Record<string, string> = {
// Primary types
Agent: "Bot",
Human: "User",
Tool: "Wrench",
// Task/IO types
Task: "FileText",
Input: "Upload",
Output: "Download",
// Group types
Entity: "Circle",
Person: "User",
Organization: "Users",
// Fallback
Unknown: "Circle",
};
const iconName = iconMap[type || "Unknown"] || "Circle";
return createIconDataUri(iconName, 48);
}
/**
* Get node icon with custom size
*/
export function getNodeIconWithSize(type?: string, size: number = 48): string {
const iconMap: Record<string, string> = {
Agent: "Bot",
Human: "User",
Tool: "Wrench",
Task: "FileText",
Input: "Upload",
Output: "Download",
Entity: "Circle",
Person: "User",
Organization: "Users",
Unknown: "Circle",
};
const iconName = iconMap[type || "Unknown"] || "Circle";
return createIconDataUri(iconName, size);
}
|