flowyml 1.2.0__py3-none-any.whl → 1.3.0__py3-none-any.whl

flowyml/ui/frontend/src/components/PipelineDetailsPanel.jsx

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../utils/api';
+import {
+    Layers,
+    Calendar,
+    Activity,
+    Clock,
+    CheckCircle,
+    XCircle,
+    PlayCircle,
+    ArrowRight,
+    MoreHorizontal,
+    Download,
+    Trash2,
+    X,
+    TrendingUp,
+    Zap
+} from 'lucide-react';
+import { Card } from './ui/Card';
+import { Badge } from './ui/Badge';
+import { Button } from './ui/Button';
+import { format } from 'date-fns';
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { StatusBadge } from './ui/ExecutionStatus';
+import { ProjectSelector } from './ProjectSelector';
+import { useToast } from '../contexts/ToastContext';
+
+export function PipelineDetailsPanel({ pipeline, onClose, onProjectUpdate }) {
+    const [runs, setRuns] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [currentProject, setCurrentProject] = useState(pipeline?.project);
+    const toast = useToast();
+
+    useEffect(() => {
+        if (pipeline) {
+            fetchRuns();
+            setCurrentProject(pipeline.project);
+        }
+    }, [pipeline]);
+
+    const fetchRuns = async () => {
+        setLoading(true);
+        try {
+            const url = `/api/runs?pipeline=${encodeURIComponent(pipeline.name)}&limit=50`;
+            const res = await fetchApi(url);
+            const data = await res.json();
+            setRuns(data.runs || []);
+        } catch (error) {
+            console.error('Failed to fetch runs:', error);
+            toast.error(`Failed to load pipeline runs: ${error.message}`);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleProjectUpdate = async (newProject) => {
+        try {
+            await fetchApi(`/api/pipelines/${pipeline.name}/project`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ project_name: newProject })
+            });
+            setCurrentProject(newProject);
+            toast.success(`Pipeline assigned to project: ${newProject}`);
+            // Trigger parent component refresh to update the pipelines list
+            if (onProjectUpdate) {
+                onProjectUpdate();
+            }
+        } catch (error) {
+            console.error('Failed to update project:', error);
+            toast.error(`Failed to update project: ${error.message}`);
+        }
+    };
+
+    if (!pipeline) return null;
+
+    const stats = {
+        total: runs.length,
+        success: runs.filter(r => r.status === 'completed').length,
+        failed: runs.filter(r => r.status === 'failed').length,
+        avgDuration: runs.length > 0
+            ? runs.reduce((acc, r) => acc + (r.duration || 0), 0) / runs.length
+            : 0
+    };
+
+    const successRate = stats.total > 0 ? (stats.success / stats.total) * 100 : 0;
+
+    return (
+        <div className="h-full flex flex-col bg-white dark:bg-slate-900">
+            {/* Header */}
+            <div className="p-6 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/50">
+                <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-center gap-4">
+                        <div className="p-3 bg-gradient-to-br from-primary-500 to-purple-500 rounded-xl text-white shadow-lg">
+                            <Layers size={24} />
+                        </div>
+                        <div>
+                            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
+                                {pipeline.name}
+                            </h2>
+                            <div className="flex items-center gap-2 mt-1 text-sm text-slate-500">
+                                <ProjectSelector
+                                    currentProject={currentProject}
+                                    onUpdate={handleProjectUpdate}
+                                />
+                                {pipeline.version && (
+                                    <>
+                                        <span>•</span>
+                                        <Badge variant="secondary" className="text-xs">v{pipeline.version}</Badge>
+                                    </>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <Button variant="ghost" size="sm" onClick={onClose}>
+                            <X size={20} className="text-slate-400" />
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Stats Grid */}
+                <div className="grid grid-cols-4 gap-4">
+                    <StatCard
+                        label="Total Runs"
+                        value={stats.total}
+                        icon={Activity}
+                        color="blue"
+                    />
+                    <StatCard
+                        label="Success Rate"
+                        value={`${Math.round(successRate)}%`}
+                        icon={CheckCircle}
+                        color={successRate >= 80 ? 'emerald' : successRate >= 50 ? 'amber' : 'rose'}
+                    />
+                    <StatCard
+                        label="Avg Duration"
+                        value={`${stats.avgDuration.toFixed(1)}s`}
+                        icon={Clock}
+                        color="purple"
+                    />
+                    <StatCard
+                        label="Failed"
+                        value={stats.failed}
+                        icon={XCircle}
+                        color="rose"
+                    />
+                </div>
+            </div>
+
+            {/* Content - Runs List */}
+            <div className="flex-1 overflow-hidden flex flex-col">
+                <div className="p-4 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between bg-white dark:bg-slate-900">
+                    <h3 className="font-semibold text-slate-900 dark:text-white flex items-center gap-2">
+                        <PlayCircle size={18} className="text-slate-400" />
+                        Recent Executions
+                    </h3>
+                    <Link to={`/runs?pipeline=${encodeURIComponent(pipeline.name)}`}>
+                        <Button variant="ghost" size="sm" className="text-primary-600">
+                            View All Runs <ArrowRight size={16} className="ml-1" />
+                        </Button>
+                    </Link>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-slate-50 dark:bg-slate-900/50">
+                    {loading ? (
+                        <div className="flex justify-center py-8">
+                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+                        </div>
+                    ) : runs.length === 0 ? (
+                        <div className="text-center py-12 text-slate-500">
+                            No runs found for this pipeline
+                        </div>
+                    ) : (
+                        runs.map(run => (
+                            <Link key={run.run_id} to={`/runs/${run.run_id}`}>
+                                <motion.div
+                                    initial={{ opacity: 0, y: 10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    className="bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 hover:shadow-md hover:border-primary-300 dark:hover:border-primary-700 transition-all group"
+                                >
+                                    <div className="flex items-center justify-between">
+                                        <div className="flex items-center gap-4">
+                                            <StatusBadge status={run.status} />
+                                            <div>
+                                                <div className="font-medium text-slate-900 dark:text-white flex items-center gap-2">
+                                                    {run.name || `Run ${run.run_id.slice(0, 8)}`}
+                                                    <span className="text-xs font-mono text-slate-400">#{run.run_id.slice(0, 6)}</span>
+                                                </div>
+                                                <div className="flex items-center gap-3 text-xs text-slate-500 mt-1">
+                                                    <span className="flex items-center gap-1">
+                                                        <Calendar size={12} />
+                                                        {format(new Date(run.created || run.start_time), 'MMM d, HH:mm')}
+                                                    </span>
+                                                    <span className="flex items-center gap-1">
+                                                        <Clock size={12} />
+                                                        {run.duration ? `${run.duration.toFixed(1)}s` : '-'}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <ArrowRight size={16} className="text-slate-300 group-hover:text-primary-500 transition-colors" />
+                                    </div>
+                                </motion.div>
+                            </Link>
+                        ))
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function StatCard({ label, value, icon: Icon, color }) {
+    const colorClasses = {
+        blue: 'text-blue-600 bg-blue-50 dark:bg-blue-900/20',
+        emerald: 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20',
+        purple: 'text-purple-600 bg-purple-50 dark:bg-purple-900/20',
+        rose: 'text-rose-600 bg-rose-50 dark:bg-rose-900/20',
+        amber: 'text-amber-600 bg-amber-50 dark:bg-amber-900/20',
+    };
+
+    return (
+        <div className="bg-white dark:bg-slate-800 p-3 rounded-xl border border-slate-200 dark:border-slate-700">
+            <div className="flex items-center gap-2 mb-1">
+                <div className={`p-1 rounded-lg ${colorClasses[color] || colorClasses.blue}`}>
+                    <Icon size={14} />
+                </div>
+                <span className="text-xs text-slate-500 font-medium">{label}</span>
+            </div>
+            <div className="text-lg font-bold text-slate-900 dark:text-white pl-1">
+                {value}
+            </div>
+        </div>
+    );
+}

flowyml/ui/frontend/src/components/PipelineGraph.jsx

@@ -276,16 +276,80 @@ function CustomStepNode({ data }) {
     );
 }
 
+
 function CustomArtifactNode({ data }) {
+    // Determine icon and styling based on artifact type (inferred from label)
+    const getArtifactStyle = (label) => {
+        const lowerLabel = label.toLowerCase();
+
+        if (lowerLabel.includes('model') || lowerLabel.includes('weights')) {
+            return {
+                icon: Box,
+                bgColor: 'bg-purple-100 dark:bg-purple-900/30',
+                borderColor: 'border-purple-400 dark:border-purple-600',
+                iconColor: 'text-purple-600 dark:text-purple-400',
+                textColor: 'text-purple-900 dark:text-purple-100'
+            };
+        }
+        if (lowerLabel.includes('feature') || lowerLabel.includes('train_set') || lowerLabel.includes('test_set')) {
+            return {
+                icon: Layers,
+                bgColor: 'bg-emerald-100 dark:bg-emerald-900/30',
+                borderColor: 'border-emerald-400 dark:border-emerald-600',
+                iconColor: 'text-emerald-600 dark:text-emerald-400',
+                textColor: 'text-emerald-900 dark:text-emerald-100'
+            };
+        }
+        if (lowerLabel.includes('data') || lowerLabel.includes('batch') || lowerLabel.includes('set')) {
+            return {
+                icon: Database,
+                bgColor: 'bg-blue-100 dark:bg-blue-900/30',
+                borderColor: 'border-blue-400 dark:border-blue-600',
+                iconColor: 'text-blue-600 dark:text-blue-400',
+                textColor: 'text-blue-900 dark:text-blue-100'
+            };
+        }
+        if (lowerLabel.includes('metrics') || lowerLabel.includes('report') || lowerLabel.includes('status')) {
+            return {
+                icon: BarChart2,
+                bgColor: 'bg-orange-100 dark:bg-orange-900/30',
+                borderColor: 'border-orange-400 dark:border-orange-600',
+                iconColor: 'text-orange-600 dark:text-orange-400',
+                textColor: 'text-orange-900 dark:text-orange-100'
+            };
+        }
+        if (lowerLabel.includes('image') || lowerLabel.includes('docker')) {
+            return {
+                icon: Box,
+                bgColor: 'bg-cyan-100 dark:bg-cyan-900/30',
+                borderColor: 'border-cyan-400 dark:border-cyan-600',
+                iconColor: 'text-cyan-600 dark:text-cyan-400',
+                textColor: 'text-cyan-900 dark:text-cyan-100'
+            };
+        }
+
+        // Default style
+        return {
+            icon: FileText,
+            bgColor: 'bg-slate-100 dark:bg-slate-800',
+            borderColor: 'border-slate-300 dark:border-slate-600',
+            iconColor: 'text-slate-500 dark:text-slate-400',
+            textColor: 'text-slate-700 dark:text-slate-300'
+        };
+    };
+
+    const style = getArtifactStyle(data.label);
+    const Icon = style.icon;
+
     return (
         <div
-            className="px-3 py-2 rounded-full bg-slate-100 border border-slate-300 flex items-center justify-center gap-2 shadow-sm min-w-[120px]"
+            className={`px-3 py-2 rounded-lg ${style.bgColor} border-2 ${style.borderColor} flex items-center justify-center gap-2 shadow-md hover:shadow-lg transition-all min-w-[140px]`}
             style={{ height: artifactNodeHeight }}
         >
             <Handle type="target" position={Position.Top} className="!bg-slate-400 !w-2 !h-2" />
 
-            <Database size={12} className="text-slate-500" />
-            <span className="text-xs font-medium text-slate-700 truncate max-w-[140px]" title={data.label}>
+            <Icon size={14} className={style.iconColor} />
+            <span className={`text-xs font-semibold ${style.textColor} truncate max-w-[100px]`} title={data.label}>
                 {data.label}
             </span>
 

flowyml/ui/frontend/src/components/ProjectSelector.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../utils/api';
+import { Folder, ChevronDown, Check } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export function ProjectSelector({ currentProject, onUpdate, type = 'default' }) {
+    const [projects, setProjects] = useState([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (isOpen && projects.length === 0) {
+            fetchProjects();
+        }
+    }, [isOpen]);
+
+    const fetchProjects = async () => {
+        setLoading(true);
+        try {
+            const res = await fetchApi('/api/projects/');
+            const data = await res.json();
+            setProjects(data.projects || []);
+        } catch (error) {
+            console.error('Failed to fetch projects:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSelect = async (projectName) => {
+        if (projectName === currentProject) {
+            setIsOpen(false);
+            return;
+        }
+
+        await onUpdate(projectName);
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="relative">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className={`
+                    flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all
+                    ${currentProject
+                        ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/30'
+                        : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700'
+                    }
+                `}
+            >
+                <Folder size={14} />
+                <span>{currentProject || 'Assign Project'}</span>
+                <ChevronDown size={12} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+            </button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <>
+                        <div
+                            className="fixed inset-0 z-40"
+                            onClick={() => setIsOpen(false)}
+                        />
+                        <motion.div
+                            initial={{ opacity: 0, y: 5, scale: 0.95 }}
+                            animate={{ opacity: 1, y: 0, scale: 1 }}
+                            exit={{ opacity: 0, y: 5, scale: 0.95 }}
+                            transition={{ duration: 0.1 }}
+                            className="absolute top-full left-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 overflow-hidden"
+                        >
+                            <div className="p-2 border-b border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
+                                <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider px-2">
+                                    Select Project
+                                </span>
+                            </div>
+
+                            <div className="max-h-64 overflow-y-auto p-1">
+                                {loading ? (
+                                    <div className="p-4 text-center text-slate-400 text-xs">Loading...</div>
+                                ) : (
+                                    <>
+                                        {projects.map(project => (
+                                            <button
+                                                key={project.name}
+                                                onClick={() => handleSelect(project.name)}
+                                                className={`
+                                                    w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors
+                                                    ${currentProject === project.name
+                                                        ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300'
+                                                        : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
+                                                    }
+                                                `}
+                                            >
+                                                <div className="flex items-center gap-2">
+                                                    <Folder size={14} />
+                                                    <span className="truncate max-w-[140px]">{project.name}</span>
+                                                </div>
+                                                {currentProject === project.name && <Check size={14} />}
+                                            </button>
+                                        ))}
+                                        {projects.length === 0 && (
+                                            <div className="p-3 text-center text-slate-400 text-xs">
+                                                No projects found
+                                            </div>
+                                        )}
+                                    </>
+                                )}
+                            </div>
+                        </motion.div>
+                    </>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}