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

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

@@ -0,0 +1,227 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../utils/api';
+import {
+    FlaskConical,
+    Calendar,
+    Activity,
+    Clock,
+    CheckCircle,
+    XCircle,
+    PlayCircle,
+    ArrowRight,
+    MoreHorizontal,
+    Download,
+    Trash2,
+    X
+} 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';
+
+export function ExperimentDetailsPanel({ experiment, onClose }) {
+    const [runs, setRuns] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (experiment) {
+            fetchRuns();
+        }
+    }, [experiment]);
+
+    const fetchRuns = async () => {
+        setLoading(true);
+        try {
+            // Assuming we can filter runs by experiment name or ID
+            // If the API doesn't support filtering by experiment directly, we might need to fetch all and filter
+            // But let's assume there's a way or we use the pipeline name if available
+            const url = experiment.pipeline_name
+                ? `/api/runs?pipeline=${encodeURIComponent(experiment.pipeline_name)}&limit=50`
+                : `/api/runs?limit=50`; // Fallback
+
+            const res = await fetchApi(url);
+            const data = await res.json();
+
+            // Filter runs that belong to this experiment if possible
+            // This depends on how experiments are linked to runs in the backend
+            // For now, let's assume runs with the same pipeline name are relevant
+            const relevantRuns = data.runs.filter(r =>
+                r.pipeline_name === experiment.pipeline_name ||
+                (experiment.runs && experiment.runs.includes(r.run_id))
+            );
+
+            setRuns(relevantRuns);
+        } catch (error) {
+            console.error('Failed to fetch runs:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (!experiment) 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
+    };
+
+    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-purple-100 dark:bg-purple-900/30 rounded-xl text-purple-600 dark:text-purple-400">
+                            <FlaskConical size={24} />
+                        </div>
+                        <div>
+                            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
+                                {experiment.name}
+                            </h2>
+                            <div className="flex items-center gap-2 mt-1 text-sm text-slate-500">
+                                {experiment.project && (
+                                    <span className="flex items-center gap-1">
+                                        <span className="opacity-50">Project:</span>
+                                        <span className="font-medium text-slate-700 dark:text-slate-300">{experiment.project}</span>
+                                    </span>
+                                )}
+                                <span>•</span>
+                                <span>{format(new Date(experiment.created_at || Date.now()), 'MMM d, yyyy')}</span>
+                            </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>
+
+                {/* Description */}
+                {experiment.description && (
+                    <p className="text-slate-600 dark:text-slate-400 text-sm mb-6 max-w-3xl">
+                        {experiment.description}
+                    </p>
+                )}
+
+                {/* 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={`${stats.total > 0 ? Math.round((stats.success / stats.total) * 100) : 0}%`}
+                        icon={CheckCircle}
+                        color="emerald"
+                    />
+                    <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 Runs
+                    </h3>
+                    <Link to={`/runs?pipeline=${encodeURIComponent(experiment.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 experiment
+                        </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',
+    };
+
+    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]}`}>
+                    <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/NavigationTree.jsx

@@ -0,0 +1,401 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../utils/api';
+import {
+    ChevronRight,
+    ChevronDown,
+    Box,
+    Activity,
+    PlayCircle,
+    FileBox,
+    CheckCircle,
+    XCircle,
+    Clock,
+    Database,
+    Layers,
+    X,
+    Download,
+    Info,
+    BarChart2,
+    FileText,
+    Eye,
+    Folder,
+    GitBranch,
+    FlaskConical,
+    Search,
+    Filter
+} from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { formatDate } from '../utils/date';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const StatusIcon = ({ status }) => {
+    switch (status?.toLowerCase()) {
+        case 'completed':
+        case 'success':
+            return <CheckCircle className="w-3.5 h-3.5 text-emerald-500" />;
+        case 'failed':
+            return <XCircle className="w-3.5 h-3.5 text-rose-500" />;
+        case 'running':
+            return <Activity className="w-3.5 h-3.5 text-amber-500 animate-spin" />;
+        default:
+            return <Clock className="w-3.5 h-3.5 text-slate-400" />;
+    }
+};
+
+const TreeNode = ({
+    label,
+    icon: Icon,
+    children,
+    defaultExpanded = false,
+    actions,
+    status,
+    level = 0,
+    badge,
+    onClick,
+    isActive = false,
+    subLabel
+}) => {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const hasChildren = children && children.length > 0;
+
+    return (
+        <div className="select-none">
+            <motion.div
+                initial={false}
+                animate={{ backgroundColor: isActive ? 'rgba(59, 130, 246, 0.1)' : 'transparent' }}
+                className={`
+                    group flex items-center gap-2 px-2 py-1.5 rounded-lg cursor-pointer transition-all
+                    hover:bg-slate-100 dark:hover:bg-slate-800
+                    ${isActive ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400' : 'text-slate-700 dark:text-slate-300'}
+                    ${level === 0 ? 'mb-0.5' : ''}
+                `}
+                style={{ paddingLeft: `${level * 1.25 + 0.5}rem` }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    if (hasChildren) {
+                        setIsExpanded(!isExpanded);
+                    }
+                    onClick?.();
+                }}
+            >
+                <div className="flex items-center gap-1 text-slate-400 shrink-0">
+                    {hasChildren ? (
+                        <motion.div
+                            animate={{ rotate: isExpanded ? 90 : 0 }}
+                            transition={{ duration: 0.2 }}
+                        >
+                            <ChevronRight className="w-3.5 h-3.5" />
+                        </motion.div>
+                    ) : (
+                        <div className="w-3.5" />
+                    )}
+                </div>
+
+                {Icon && (
+                    <Icon className={`w-4 h-4 shrink-0 ${isActive ? 'text-blue-500' : 'text-slate-400 group-hover:text-slate-500 dark:text-slate-500 dark:group-hover:text-slate-400'}`} />
+                )}
+
+                <div className="flex-1 flex items-center justify-between gap-2 min-w-0 overflow-hidden">
+                    <div className="flex flex-col min-w-0">
+                        <span className={`text-sm truncate ${isActive ? 'font-medium' : ''}`}>
+                            {label}
+                        </span>
+                        {subLabel && (
+                            <span className="text-[10px] text-slate-400 truncate">
+                                {subLabel}
+                            </span>
+                        )}
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0">
+                        {badge}
+                        {status && <StatusIcon status={status} />}
+                        {actions}
+                    </div>
+                </div>
+            </motion.div>
+
+            <AnimatePresence initial={false}>
+                {isExpanded && hasChildren && (
+                    <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        transition={{ duration: 0.2 }}
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export function NavigationTree({
+    projectId,
+    onSelect,
+    selectedId,
+    mode = 'experiments', // experiments, pipelines, runs
+    className = ''
+}) {
+    const [data, setData] = useState({ projects: [], items: [] });
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [filter, setFilter] = useState('');
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                let url = '';
+                let itemsKey = '';
+
+                switch (mode) {
+                    case 'experiments':
+                        url = projectId
+                            ? `/api/experiments/?project=${encodeURIComponent(projectId)}`
+                            : '/api/experiments/';
+                        itemsKey = 'experiments';
+                        break;
+                    case 'pipelines':
+                        url = projectId
+                            ? `/api/pipelines/?project=${encodeURIComponent(projectId)}`
+                            : '/api/pipelines/';
+                        itemsKey = 'pipelines';
+                        break;
+                    case 'runs':
+                        url = projectId
+                            ? `/api/runs/?project=${encodeURIComponent(projectId)}&limit=100`
+                            : '/api/runs/?limit=100';
+                        itemsKey = 'runs';
+                        break;
+                    default:
+                        break;
+                }
+
+                const res = await fetchApi(url);
+                if (!res.ok) {
+                    throw new Error(`Failed to fetch ${mode}: ${res.statusText}`);
+                }
+                const jsonData = await res.json();
+
+                // If no project selected, we might need to fetch projects to group by
+                let projects = [];
+                if (!projectId) {
+                    // Extract unique projects from items
+                    const items = jsonData[itemsKey] || [];
+                    const projectNames = [...new Set(items.map(i => i.project).filter(Boolean))];
+                    projects = projectNames.map(name => ({ name }));
+                }
+
+                setData({
+                    projects,
+                    items: jsonData[itemsKey] || []
+                });
+            } catch (error) {
+                console.error('Failed to fetch navigation data:', error);
+                setError(error.message);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [projectId, mode]);
+
+    if (loading) {
+        return (
+            <div className={`p-4 ${className}`}>
+                <div className="animate-pulse space-y-3">
+                    {[1, 2, 3, 4, 5].map(i => (
+                        <div key={i} className="h-8 bg-slate-100 dark:bg-slate-800 rounded-lg"></div>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className={`p-4 text-center ${className}`}>
+                <div className="bg-red-50 dark:bg-red-900/20 p-4 rounded-lg border border-red-100 dark:border-red-800">
+                    <XCircle className="w-8 h-8 text-red-500 mx-auto mb-2" />
+                    <p className="text-sm text-red-600 dark:text-red-400 font-medium">Failed to load data</p>
+                    <p className="text-xs text-red-500 dark:text-red-500/80 mt-1">{error}</p>
+                    <button
+                        onClick={() => window.location.reload()}
+                        className="mt-3 text-xs bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-3 py-1.5 rounded-md hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+                    >
+                        Retry
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    const filteredItems = data.items.filter(item =>
+        (item.name || item.run_id || '').toLowerCase().includes(filter.toLowerCase())
+    );
+
+    const renderExperiments = () => {
+        const getRunsForExperiment = (expName) => {
+            // This would ideally come from the API or be passed in,
+            // but for now we might not have runs loaded here.
+            // We'll just show the experiment node.
+            return [];
+        };
+
+        const renderExperimentNode = (exp, level) => (
+            <TreeNode
+                key={exp.experiment_id}
+                label={exp.name}
+                icon={FlaskConical}
+                level={level}
+                isActive={selectedId === exp.experiment_id}
+                onClick={() => onSelect?.(exp)}
+                badge={
+                    <span className="text-[10px] bg-slate-100 dark:bg-slate-800 text-slate-500 px-1.5 py-0.5 rounded-full">
+                        {exp.run_count || 0}
+                    </span>
+                }
+            />
+        );
+
+        if (projectId || data.projects.length === 0) {
+            return filteredItems.map(exp => renderExperimentNode(exp, 0));
+        } else {
+            return data.projects.map(proj => {
+                const projExperiments = filteredItems.filter(e => e.project === proj.name);
+                if (projExperiments.length === 0) return null;
+
+                return (
+                    <TreeNode
+                        key={proj.name}
+                        label={proj.name}
+                        icon={Folder}
+                        level={0}
+                        defaultExpanded={true}
+                        badge={
+                            <span className="text-xs text-slate-400">
+                                {projExperiments.length}
+                            </span>
+                        }
+                    >
+                        {projExperiments.map(exp => renderExperimentNode(exp, 1))}
+                    </TreeNode>
+                );
+            });
+        }
+    };
+
+    const renderPipelines = () => {
+        const renderPipelineNode = (pipeline, level) => (
+            <TreeNode
+                key={pipeline.name}
+                label={pipeline.name}
+                icon={Layers}
+                level={level}
+                isActive={selectedId === pipeline.name}
+                onClick={() => onSelect?.(pipeline)}
+                badge={
+                    <span className="text-[10px] bg-slate-100 dark:bg-slate-800 text-slate-500 px-1.5 py-0.5 rounded-full">
+                        v{pipeline.version || '1'}
+                    </span>
+                }
+            />
+        );
+
+        if (projectId || data.projects.length === 0) {
+            return filteredItems.map(p => renderPipelineNode(p, 0));
+        } else {
+            return data.projects.map(proj => {
+                const projPipelines = filteredItems.filter(p => p.project === proj.name);
+                if (projPipelines.length === 0) return null;
+
+                return (
+                    <TreeNode
+                        key={proj.name}
+                        label={proj.name}
+                        icon={Folder}
+                        level={0}
+                        defaultExpanded={true}
+                    >
+                        {projPipelines.map(p => renderPipelineNode(p, 1))}
+                    </TreeNode>
+                );
+            });
+        }
+    };
+
+    const renderRuns = () => {
+        const renderRunNode = (run, level) => (
+            <TreeNode
+                key={run.run_id}
+                label={run.name || run.run_id.slice(0, 8)}
+                subLabel={formatDate(run.created || run.start_time)}
+                icon={PlayCircle}
+                level={level}
+                status={run.status}
+                isActive={selectedId === run.run_id}
+                onClick={() => onSelect?.(run)}
+            />
+        );
+
+        // Group by Pipeline
+        const pipelines = [...new Set(filteredItems.map(r => r.pipeline_name).filter(Boolean))];
+
+        return pipelines.map(pipelineName => {
+            const pipelineRuns = filteredItems.filter(r => r.pipeline_name === pipelineName);
+
+            return (
+                <TreeNode
+                    key={pipelineName}
+                    label={pipelineName}
+                    icon={Activity}
+                    level={0}
+                    defaultExpanded={true}
+                    badge={
+                        <span className="text-xs text-slate-400">
+                            {pipelineRuns.length}
+                        </span>
+                    }
+                >
+                    {pipelineRuns.map(run => renderRunNode(run, 1))}
+                </TreeNode>
+            );
+        });
+    };
+
+    return (
+        <div className={`flex flex-col h-full bg-slate-50/50 dark:bg-slate-900/50 ${className}`}>
+            {/* Search */}
+            <div className="p-2 sticky top-0 bg-inherit z-10">
+                <div className="relative">
+                    <Search className="absolute left-2.5 top-2.5 w-4 h-4 text-slate-400" />
+                    <input
+                        type="text"
+                        placeholder={`Search ${mode}...`}
+                        value={filter}
+                        onChange={(e) => setFilter(e.target.value)}
+                        className="w-full pl-9 pr-3 py-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500"
+                    />
+                </div>
+            </div>
+
+            {/* Tree Content */}
+            <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
+                {filteredItems.length === 0 ? (
+                    <div className="text-center py-8 text-slate-400 text-sm">
+                        No {mode} found
+                    </div>
+                ) : (
+                    <>
+                        {mode === 'experiments' && renderExperiments()}
+                        {mode === 'pipelines' && renderPipelines()}
+                        {mode === 'runs' && renderRuns()}
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}