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

flowyml/ui/frontend/src/app/projects/[projectId]/_components/ProjectRunsList.jsx

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../../../../utils/api';
+import { DataView } from '../../../../components/ui/DataView';
+import { Link } from 'react-router-dom';
+import { Clock, CheckCircle, XCircle, AlertCircle, Loader2 } from 'lucide-react';
+import { formatDate } from '../../../../utils/date';
+
+const StatusIcon = ({ status }) => {
+    switch (status?.toLowerCase()) {
+        case 'completed':
+        case 'success':
+            return <CheckCircle className="w-4 h-4 text-green-500" />;
+        case 'failed':
+            return <XCircle className="w-4 h-4 text-red-500" />;
+        case 'running':
+            return <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />;
+        default:
+            return <AlertCircle className="w-4 h-4 text-slate-400" />;
+    }
+};
+
+export function ProjectRunsList({ projectId }) {
+    const [runs, setRuns] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchRuns = async () => {
+            try {
+                const response = await fetchApi(`/api/runs?project=${projectId}`);
+                const data = await response.json();
+                // API returns {runs: [...]}
+                setRuns(Array.isArray(data?.runs) ? data.runs : []);
+            } catch (error) {
+                console.error('Failed to fetch runs:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (projectId) {
+            fetchRuns();
+        }
+    }, [projectId]);
+
+    const columns = [
+        {
+            header: 'Run Name',
+            key: 'name',
+            render: (run) => (
+                <Link to={`/runs/${run.run_id}`} className="flex items-center gap-3 group">
+                    <div className="p-2 bg-slate-100 dark:bg-slate-700 rounded-lg group-hover:bg-slate-200 dark:group-hover:bg-slate-600 transition-colors">
+                        <Clock className="w-4 h-4 text-slate-500" />
+                    </div>
+                    <div>
+                        <div className="font-medium text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                            {run.name || run.run_id.substring(0, 8)}
+                        </div>
+                        <div className="text-xs text-slate-500">{run.pipeline_name}</div>
+                    </div>
+                </Link>
+            )
+        },
+        {
+            header: 'Status',
+            key: 'status',
+            render: (run) => (
+                <div className="flex items-center gap-2">
+                    <StatusIcon status={run.status} />
+                    <span className="capitalize text-sm">{run.status}</span>
+                </div>
+            )
+        },
+        {
+            header: 'Created',
+            key: 'created',
+            render: (run) => (
+                <span className="text-slate-500 text-sm">
+                    {formatDate(run.created, 'MMM d, yyyy HH:mm')}
+                </span>
+            )
+        }
+    ];
+
+    return (
+        <DataView
+            items={runs}
+            loading={loading}
+            columns={columns}
+            initialView="table"
+            renderGrid={(run) => (
+                <Link to={`/runs/${run.run_id}`} className="block">
+                    <div className="group p-5 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-blue-500/50 hover:shadow-md transition-all duration-300">
+                        <div className="flex items-start justify-between mb-3">
+                            <div className="flex items-center gap-2">
+                                <StatusIcon status={run.status} />
+                                <span className={`text-sm font-medium capitalize ${run.status === 'completed' ? 'text-green-600 dark:text-green-400' :
+                                    run.status === 'failed' ? 'text-red-600 dark:text-red-400' :
+                                        'text-slate-600 dark:text-slate-400'
+                                    }`}>
+                                    {run.status}
+                                </span>
+                            </div>
+                            <span className="text-xs font-mono text-slate-400 bg-slate-50 dark:bg-slate-900 px-2 py-1 rounded">
+                                {run.run_id.substring(0, 8)}
+                            </span>
+                        </div>
+
+                        <h3 className="font-semibold text-slate-900 dark:text-white mb-1 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                            {run.name || `Run ${run.run_id.substring(0, 8)}`}
+                        </h3>
+                        <p className="text-sm text-slate-500 dark:text-slate-400 mb-4 flex items-center gap-1">
+                            <span className="opacity-75">Pipeline:</span>
+                            <span className="font-medium text-slate-700 dark:text-slate-300">{run.pipeline_name}</span>
+                        </p>
+
+                        <div className="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 pt-3 border-t border-slate-100 dark:border-slate-700/50">
+                            <div className="flex items-center gap-1.5">
+                                <Clock className="w-3.5 h-3.5" />
+                                <span>{formatDate(run.created, 'MMM d, HH:mm')}</span>
+                            </div>
+                            {run.duration && (
+                                <span>{run.duration.toFixed(2)}s</span>
+                            )}
+                        </div>
+                    </div>
+                </Link>
+            )}
+            emptyState={
+                <div className="text-center py-8">
+                    <Clock className="w-10 h-10 mx-auto text-slate-300 mb-2" />
+                    <p className="text-slate-500">No runs found for this project</p>
+                </div>
+            }
+        />
+    );
+}

flowyml/ui/frontend/src/app/projects/[projectId]/_components/ProjectTabs.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Activity, Clock, Database, Box, LayoutDashboard, TrendingUp } from 'lucide-react';
+
+export function ProjectTabs({ activeTab, onTabChange }) {
+    return (
+        <div className="border-b border-slate-200 dark:border-slate-700 mb-6">
+            <div className="flex gap-6 overflow-x-auto">
+                <button
+                    onClick={() => onTabChange('overview')}
+                    className={`
+                        flex items-center gap-2 py-4 px-1 border-b-2 transition-colors whitespace-nowrap
+                        ${activeTab === 'overview'
+                            ? 'border-blue-500 text-blue-600 dark:text-blue-400 font-medium'
+                            : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}
+                    `}
+                >
+                    <LayoutDashboard className="w-4 h-4" />
+                    Overview
+                </button>
+                <button
+                    onClick={() => onTabChange('pipelines')}
+                    className={`
+                        flex items-center gap-2 py-4 px-1 border-b-2 transition-colors whitespace-nowrap
+                        ${activeTab === 'pipelines'
+                            ? 'border-blue-500 text-blue-600 dark:text-blue-400 font-medium'
+                            : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}
+                    `}
+                >
+                    <Activity className="w-4 h-4" />
+                    Pipelines
+                </button>
+                <button
+                    onClick={() => onTabChange('runs')}
+                    className={`
+                        flex items-center gap-2 py-4 px-1 border-b-2 transition-colors whitespace-nowrap
+                        ${activeTab === 'runs'
+                            ? 'border-blue-500 text-blue-600 dark:text-blue-400 font-medium'
+                            : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}
+                    `}
+                >
+                    <Clock className="w-4 h-4" />
+                    Runs
+                </button>
+                <button
+                    onClick={() => onTabChange('experiments')}
+                    className={`
+                        flex items-center gap-2 py-4 px-1 border-b-2 transition-colors whitespace-nowrap
+                        ${activeTab === 'experiments'
+                            ? 'border-blue-500 text-blue-600 dark:text-blue-400 font-medium'
+                            : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}
+                    `}
+                >
+                    <Activity className="w-4 h-4" />
+                    Experiments
+                </button>
+                <button
+                    onClick={() => onTabChange('models')}
+                    className={`
+                        flex items-center gap-2 py-4 px-1 border-b-2 transition-colors whitespace-nowrap
+                        ${activeTab === 'models'
+                            ? 'border-blue-500 text-blue-600 dark:text-blue-400 font-medium'
+                            : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}
+                    `}
+                >
+                    <Box className="w-4 h-4" />
+                    Models
+                </button>
+                <button
+                    onClick={() => onTabChange('artifacts')}
+                    className={`
+                        flex items-center gap-2 py-4 px-1 border-b-2 transition-colors whitespace-nowrap
+                        ${activeTab === 'artifacts'
+                            ? 'border-blue-500 text-blue-600 dark:text-blue-400 font-medium'
+                            : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}
+                    `}
+                >
+                    <Database className="w-4 h-4" />
+                    Artifacts
+                </button>
+                <button
+                    onClick={() => onTabChange('metrics')}
+                    className={`
+                        flex items-center gap-2 py-4 px-1 border-b-2 transition-colors whitespace-nowrap
+                        ${activeTab === 'metrics'
+                            ? 'border-blue-500 text-blue-600 dark:text-blue-400 font-medium'
+                            : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}
+                    `}
+                >
+                    <TrendingUp className="w-4 h-4" />
+                    Metrics
+                </button>
+            </div>
+        </div>
+    );
+}

flowyml/ui/frontend/src/app/projects/[projectId]/page.jsx

@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { fetchApi } from '../../../utils/api';
+import {
+    LayoutDashboard,
+    GitBranch,
+    PlayCircle,
+    FlaskConical,
+    BarChart2,
+    Settings,
+    Package,
+    HardDrive,
+    Activity,
+    Box,
+    Database,
+    Clock
+} from 'lucide-react';
+import { AssetTreeHierarchy } from '../../../components/AssetTreeHierarchy';
+import { AssetDetailsPanel } from '../../../components/AssetDetailsPanel';
+import { ProjectHeader } from './_components/ProjectHeader';
+import { ProjectMetricsPanel } from './_components/ProjectMetricsPanel';
+import { ProjectExperimentsList } from './_components/ProjectExperimentsList';
+import { ProjectRunsList } from './_components/ProjectRunsList';
+import { ProjectPipelinesList } from './_components/ProjectPipelinesList';
+import { ErrorBoundary } from '../../../components/ui/ErrorBoundary';
+import { Card } from '../../../components/ui/Card';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export function ProjectDetails() {
+    const { projectId } = useParams();
+    const [project, setProject] = useState(null);
+    const [stats, setStats] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [activeView, setActiveView] = useState('overview');
+    const [selectedAsset, setSelectedAsset] = useState(null);
+
+    useEffect(() => {
+        const fetchProjectDetails = async () => {
+            try {
+                const response = await fetchApi(`/api/projects/${projectId}`);
+                const projectData = await response.json();
+
+                // Ensure pipelines is an array
+                if (projectData.pipelines && !Array.isArray(projectData.pipelines)) {
+                    projectData.pipelines = [];
+                }
+                setProject(projectData);
+
+                // Fetch stats
+                const [runsRes, artifactsRes, experimentsRes] = await Promise.all([
+                    fetchApi(`/api/runs?project=${projectId}&limit=1000`),
+                    fetchApi(`/api/assets?project=${projectId}&limit=1000`),
+                    fetchApi(`/api/experiments?project=${projectId}`)
+                ]);
+
+                const runsData = await runsRes.json();
+                const artifactsData = await artifactsRes.json();
+                const experimentsData = await experimentsRes.json();
+
+                const runs = Array.isArray(runsData?.runs) ? runsData.runs : [];
+                const artifacts = Array.isArray(artifactsData?.assets) ? artifactsData.assets : [];
+                const experiments = Array.isArray(experimentsData?.experiments) ? experimentsData.experiments : [];
+
+                const pipelineNames = new Set(runs.map(r => r.pipeline_name).filter(Boolean));
+                const models = artifacts.filter(a => a.type === 'Model');
+
+                setStats({
+                    runs: runs.length,
+                    pipelines: pipelineNames.size,
+                    artifacts: artifacts.length,
+                    models: models.length,
+                    experiments: experiments.length,
+                    total_storage_bytes: artifacts.reduce((acc, curr) => acc + (curr.size_bytes || 0), 0)
+                });
+
+            } catch (error) {
+                console.error('Failed to fetch project details:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (projectId) {
+            fetchProjectDetails();
+        }
+    }, [projectId]);
+
+    const handleAssetSelect = (asset) => {
+        setSelectedAsset(asset);
+        // We don't change activeView, just show the asset details panel overlay or replacement
+    };
+
+    const renderContent = () => {
+        if (selectedAsset) {
+            return (
+                <AssetDetailsPanel
+                    asset={selectedAsset}
+                    onClose={() => setSelectedAsset(null)}
+                />
+            );
+        }
+
+        switch (activeView) {
+            case 'overview':
+                return (
+                    <div className="space-y-6">
+                        {/* Quick Stats Row */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                            <StatCard
+                                icon={Activity}
+                                label="Total Runs"
+                                value={stats?.runs || 0}
+                                color="text-blue-500"
+                                bg="bg-blue-50 dark:bg-blue-900/20"
+                            />
+                            <StatCard
+                                icon={Box}
+                                label="Models"
+                                value={stats?.models || 0}
+                                color="text-purple-500"
+                                bg="bg-purple-50 dark:bg-purple-900/20"
+                            />
+                            <StatCard
+                                icon={FlaskConical}
+                                label="Experiments"
+                                value={stats?.experiments || 0}
+                                color="text-pink-500"
+                                bg="bg-pink-50 dark:bg-pink-900/20"
+                            />
+                            <StatCard
+                                icon={HardDrive}
+                                label="Storage"
+                                value={formatBytes(stats?.total_storage_bytes || 0)}
+                                color="text-slate-500"
+                                bg="bg-slate-50 dark:bg-slate-800"
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                            <Card className="p-0 overflow-hidden border-slate-200 dark:border-slate-800">
+                                <div className="p-4 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/50 flex items-center justify-between">
+                                    <h3 className="font-semibold text-slate-900 dark:text-white flex items-center gap-2">
+                                        <GitBranch size={16} className="text-slate-400" />
+                                        Recent Pipelines
+                                    </h3>
+                                    <button
+                                        onClick={() => setActiveView('pipelines')}
+                                        className="text-xs text-primary-600 hover:text-primary-700 font-medium"
+                                    >
+                                        View All
+                                    </button>
+                                </div>
+                                <div className="p-4">
+                                    <ProjectPipelinesList projectId={projectId} limit={5} compact />
+                                </div>
+                            </Card>
+
+                            <Card className="p-0 overflow-hidden border-slate-200 dark:border-slate-800">
+                                <div className="p-4 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/50 flex items-center justify-between">
+                                    <h3 className="font-semibold text-slate-900 dark:text-white flex items-center gap-2">
+                                        <PlayCircle size={16} className="text-slate-400" />
+                                        Recent Runs
+                                    </h3>
+                                    <button
+                                        onClick={() => setActiveView('runs')}
+                                        className="text-xs text-primary-600 hover:text-primary-700 font-medium"
+                                    >
+                                        View All
+                                    </button>
+                                </div>
+                                <div className="p-4">
+                                    <ProjectRunsList projectId={projectId} limit={5} compact />
+                                </div>
+                            </Card>
+                        </div>
+
+                        <Card className="p-0 overflow-hidden border-slate-200 dark:border-slate-800">
+                            <div className="p-4 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/50">
+                                <h3 className="font-semibold text-slate-900 dark:text-white flex items-center gap-2">
+                                    <BarChart2 size={16} className="text-slate-400" />
+                                    Production Metrics
+                                </h3>
+                            </div>
+                            <div className="p-4">
+                                <ProjectMetricsPanel projectId={projectId} />
+                            </div>
+                        </Card>
+                    </div>
+                );
+            case 'pipelines':
+                return <ProjectPipelinesList projectId={projectId} />;
+            case 'runs':
+                return <ProjectRunsList projectId={projectId} />;
+            case 'experiments':
+                return <ProjectExperimentsList projectId={projectId} />;
+            case 'metrics':
+                return <ProjectMetricsPanel projectId={projectId} />;
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className="h-screen flex flex-col overflow-hidden bg-slate-50 dark:bg-slate-900">
+            {/* Header */}
+            <div className="bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-6 py-4 shrink-0">
+                <ProjectHeader project={project} stats={stats} loading={loading} />
+            </div>
+
+            {/* Main Layout */}
+            <div className="flex-1 overflow-hidden">
+                <div className="h-full max-w-[1800px] mx-auto px-6 py-6">
+                    <div className="h-full flex gap-6">
+                        {/* Left Sidebar */}
+                        <div className="w-[380px] shrink-0 flex flex-col gap-4 overflow-y-auto pb-6">
+                            {/* Navigation Menu */}
+                            <nav className="space-y-1">
+                                <NavButton
+                                    active={activeView === 'overview' && !selectedAsset}
+                                    onClick={() => { setActiveView('overview'); setSelectedAsset(null); }}
+                                    icon={LayoutDashboard}
+                                    label="Overview"
+                                />
+                                <NavButton
+                                    active={activeView === 'pipelines' && !selectedAsset}
+                                    onClick={() => { setActiveView('pipelines'); setSelectedAsset(null); }}
+                                    icon={GitBranch}
+                                    label="Pipelines"
+                                />
+                                <NavButton
+                                    active={activeView === 'runs' && !selectedAsset}
+                                    onClick={() => { setActiveView('runs'); setSelectedAsset(null); }}
+                                    icon={PlayCircle}
+                                    label="Runs"
+                                />
+                                <NavButton
+                                    active={activeView === 'experiments' && !selectedAsset}
+                                    onClick={() => { setActiveView('experiments'); setSelectedAsset(null); }}
+                                    icon={FlaskConical}
+                                    label="Experiments"
+                                />
+                                <NavButton
+                                    active={activeView === 'metrics' && !selectedAsset}
+                                    onClick={() => { setActiveView('metrics'); setSelectedAsset(null); }}
+                                    icon={BarChart2}
+                                    label="Metrics"
+                                />
+                            </nav>
+
+                            {/* Hierarchy Tree */}
+                            <div className="flex-1 min-h-0 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden flex flex-col shadow-sm">
+                                <div className="p-3 border-b border-slate-100 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50">
+                                    <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Project Assets</h3>
+                                </div>
+                                <div className="flex-1 overflow-y-auto p-2">
+                                    <AssetTreeHierarchy
+                                        projectId={projectId}
+                                        onAssetSelect={handleAssetSelect}
+                                        compact={true}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Right Content Area */}
+                        <div className="flex-1 min-w-0 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden flex flex-col shadow-sm">
+                            <div className="flex-1 overflow-y-auto p-6">
+                                <ErrorBoundary>
+                                    <AnimatePresence mode="wait">
+                                        <motion.div
+                                            key={selectedAsset ? 'asset' : activeView}
+                                            initial={{ opacity: 0, y: 10 }}
+                                            animate={{ opacity: 1, y: 0 }}
+                                            exit={{ opacity: 0, y: -10 }}
+                                            transition={{ duration: 0.2 }}
+                                            className="h-full"
+                                        >
+                                            {renderContent()}
+                                        </motion.div>
+                                    </AnimatePresence>
+                                </ErrorBoundary>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function NavButton({ active, onClick, icon: Icon, label }) {
+    return (
+        <button
+            onClick={onClick}
+            className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${active
+                ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400 shadow-sm'
+                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-white'
+                }`}
+        >
+            <Icon size={18} className={active ? 'text-primary-600 dark:text-primary-400' : 'text-slate-400'} />
+            {label}
+        </button>
+    );
+}
+
+function StatCard({ icon: Icon, label, value, color, bg }) {
+    return (
+        <div className="bg-white dark:bg-slate-800 rounded-xl p-4 border border-slate-200 dark:border-slate-700 shadow-sm flex items-center gap-4">
+            <div className={`p-3 rounded-lg ${bg}`}>
+                <Icon size={20} className={color} />
+            </div>
+            <div>
+                <p className="text-sm text-slate-500 dark:text-slate-400">{label}</p>
+                <p className="text-xl font-bold text-slate-900 dark:text-white">{typeof value === 'number' ? value.toLocaleString() : value}</p>
+            </div>
+        </div>
+    );
+}
+
+function formatBytes(bytes) {
+    if (!bytes || bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}

flowyml/ui/frontend/src/app/projects/page.jsx

@@ -135,7 +135,11 @@ export function Projects() {
             header: 'Stats',
             key: 'stats',
             render: (project) => {
-                const stats = projectStats[project.name] || { runs: 0, pipelines: 0, artifacts: 0 };
+                const stats = {
+                    runs: project.runs || 0,
+                    pipelines: project.pipelines || 0,
+                    artifacts: project.artifacts || 0
+                };
                 return (
                     <div className="flex gap-4 text-sm text-slate-500">
                         <span className="flex items-center gap-1"><Activity size={14} /> {stats.pipelines || 0}</span>
@@ -160,11 +164,16 @@ export function Projects() {
     ];
 
     const renderGrid = (project) => {
-        const stats = projectStats[project.name] || { runs: 0, pipelines: 0, artifacts: 0 };
+        // Stats are already attached to the project object
+        const stats = {
+            runs: project.runs || 0,
+            pipelines: project.pipelines || 0,
+            artifacts: project.artifacts || 0
+        };
 
         return (
             <Link
-                to={`/runs?project=${encodeURIComponent(project.name)}`}
+                to={`/projects/${encodeURIComponent(project.name)}`}
                 onClick={() => setSelectedProject(project.name)}
                 className="block"
             >
@@ -226,6 +235,7 @@ export function Projects() {
                 items={projects}
                 loading={loading}
                 columns={columns}
+                initialView="grid"
                 renderGrid={renderGrid}
                 actions={
                     <Button onClick={() => setShowCreateModal(true)} className="flex items-center gap-2">