Spaces:
Running
Running
File size: 3,016 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 |
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Info } from "lucide-react";
import { getNodeIconWithSize } from "@/lib/node-icons";
interface LegendItem {
type: string;
color: string;
}
const nodeTypes: LegendItem[] = [
{ type: "Input", color: "#8b5cf6" }, // Left side
{ type: "Task", color: "#3b82f6" }, // Left-center
{ type: "Agent", color: "#ff6b6b" }, // Center
{ type: "Tool", color: "#10b981" }, // Right-center
{ type: "Output", color: "#f59e0b" }, // Right side
{ type: "Human", color: "#ec4899" }, // Supervisor (top)
];
interface GraphLegendProps {
className?: string;
containerBounds?: { width: number; height: number };
}
export function GraphLegend({ className = "" }: GraphLegendProps) {
return (
<div
className={`absolute top-4 left-4 z-40 pointer-events-none ${className}`}
>
<Card className="w-48 shadow-md border bg-white/95 pointer-events-auto">
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-sm">
<Info className="h-4 w-4 text-primary" />
Graph Legend
</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-xs pt-0">
{/* Node Types */}
<div>
<h5 className="font-medium mb-1">Nodes</h5>
<div className="text-xs text-muted-foreground mb-2 italic">
Workflow: Left → Right
</div>
<div className="grid grid-cols-2 gap-1">
{nodeTypes.map((item) => (
<div key={item.type} className="flex items-center gap-1.5">
<img
src={getNodeIconWithSize(item.type, 20)}
alt={item.type}
className="w-5 h-5 flex-shrink-0"
/>
<span className="text-xs truncate">{item.type}</span>
</div>
))}
</div>
</div>
{/* Highlight Zones */}
<div>
<h5 className="font-medium mb-1">Zones</h5>
<div className="space-y-0.5">
<div className="flex items-center gap-1.5">
<div className="w-3 h-2 flex-shrink-0 rounded-sm bg-green-500/20 border border-green-500/30" />
<span className="text-xs">Main Flow</span>
</div>
<div className="flex items-center gap-1.5">
<div className="w-3 h-2 flex-shrink-0 rounded-sm bg-orange-500/20 border border-orange-500/30 border-dashed" />
<span className="text-xs">Isolated</span>
</div>
<div className="flex items-center gap-1.5">
<div className="w-3 h-2 flex-shrink-0 rounded-sm bg-red-500/20 border border-red-600/50" />
<span className="text-xs">Failures</span>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
);
}
|