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

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

@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from 'react';
+import { fetchApi } from '../../../../utils/api';
+import {
+    LineChart,
+    Line,
+    BarChart,
+    Bar,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    Legend,
+    ResponsiveContainer,
+    ReferenceLine
+} from 'recharts';
+import { format } from 'date-fns';
+import { Box, Activity, Clock, Tag } from 'lucide-react';
+import { Card } from '../../../../components/ui/Card';
+import { Badge } from '../../../../components/ui/Badge';
+
+export function ProjectMetricsPanel({ projectId }) {
+    const [metrics, setMetrics] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchMetrics = async () => {
+            setLoading(true);
+            try {
+                const resp = await fetchApi(`/api/projects/${projectId}/metrics?limit=500`);
+                const data = await resp.json();
+                setMetrics(Array.isArray(data?.metrics) ? data.metrics : []);
+            } catch (err) {
+                console.error('Failed to load project metrics', err);
+                setError('Unable to load metrics');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (projectId) {
+            fetchMetrics();
+        }
+    }, [projectId]);
+
+    if (loading) return <LoadingState />;
+    if (error) return <ErrorState error={error} />;
+    if (!metrics.length) return <EmptyState />;
+
+    // Group metrics by model
+    const modelGroups = metrics.reduce((acc, curr) => {
+        if (!acc[curr.model_name]) {
+            acc[curr.model_name] = [];
+        }
+        acc[curr.model_name].push(curr);
+        return acc;
+    }, {});
+
+    return (
+        <div className="space-y-8">
+            {Object.entries(modelGroups).map(([modelName, modelMetrics]) => (
+                <ModelMetricsDashboard
+                    key={modelName}
+                    modelName={modelName}
+                    metrics={modelMetrics}
+                />
+            ))}
+        </div>
+    );
+}
+
+function ModelMetricsDashboard({ modelName, metrics }) {
+    // Sort by date
+    const sortedMetrics = [...metrics].sort((a, b) =>
+        new Date(a.created_at) - new Date(b.created_at)
+    );
+
+    // Get latest metrics for summary
+    const latestMetricEntry = sortedMetrics[sortedMetrics.length - 1];
+
+    // Prepare data for charts
+    // We need to pivot the data: one entry per timestamp, with keys for each metric
+    // The API returns one row per metric name (e.g. "accuracy", "f1_score") per timestamp?
+    // Wait, let's check seed data.
+    // project_store.log_model_metrics calls save_metrics which saves individual rows?
+    // Or does it save a JSON blob?
+    // The seed data calls log_model_metrics with a dict of metrics.
+    // The API likely returns flattened rows or the logged object.
+    // Let's assume the API returns what we saw in the previous file:
+    // { model_name, metric_name, metric_value, created_at, ... }
+
+    // So we need to group by timestamp to form a "run" or "log event"
+    const historyData = sortedMetrics.reduce((acc, curr) => {
+        const timeKey = curr.created_at;
+        if (!acc[timeKey]) {
+            acc[timeKey] = {
+                timestamp: timeKey,
+                displayDate: format(new Date(timeKey), 'MMM d HH:mm'),
+                tags: curr.tags,
+                run_id: curr.run_id,
+                environment: curr.environment
+            };
+        }
+        // Add metric value
+        acc[timeKey][curr.metric_name] = typeof curr.metric_value === 'number'
+            ? parseFloat(curr.metric_value.toFixed(4))
+            : curr.metric_value;
+        return acc;
+    }, {});
+
+    const chartData = Object.values(historyData);
+
+    // Identify metric names (keys) that are numbers
+    const metricNames = [...new Set(metrics.map(m => m.metric_name))];
+    const numericMetrics = metricNames.filter(name =>
+        chartData.some(d => typeof d[name] === 'number')
+    );
+
+    // Separate latency from score metrics (usually 0-1)
+    const scoreMetrics = numericMetrics.filter(name => !name.includes('latency') && !name.includes('loss'));
+    const latencyMetrics = numericMetrics.filter(name => name.includes('latency'));
+
+    return (
+        <Card className="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">
+                <div className="flex items-center gap-3">
+                    <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
+                        <Box className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                    </div>
+                    <div>
+                        <h3 className="font-semibold text-slate-900 dark:text-white">{modelName}</h3>
+                        <div className="flex items-center gap-2 text-xs text-slate-500">
+                            <Clock size={12} />
+                            Last updated: {format(new Date(latestMetricEntry.created_at), 'MMM d, yyyy HH:mm')}
+                        </div>
+                    </div>
+                </div>
+                <div className="flex gap-2">
+                    {latestMetricEntry.environment && (
+                        <Badge variant="outline" className="bg-white dark:bg-slate-800">
+                            {latestMetricEntry.environment}
+                        </Badge>
+                    )}
+                    <Badge className="bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 border-0">
+                        {chartData.length} logs
+                    </Badge>
+                </div>
+            </div>
+
+            <div className="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+                {/* Latest Stats */}
+                <div className="space-y-4">
+                    <h4 className="text-sm font-medium text-slate-500 uppercase tracking-wider">Latest Performance</h4>
+                    <div className="grid grid-cols-2 gap-3">
+                        {scoreMetrics.map(metric => (
+                            <div key={metric} className="p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-slate-100 dark:border-slate-800">
+                                <p className="text-xs text-slate-500 mb-1 capitalize">{metric.replace(/_/g, ' ')}</p>
+                                <p className="text-lg font-bold text-slate-900 dark:text-white">
+                                    {chartData[chartData.length - 1][metric]}
+                                </p>
+                            </div>
+                        ))}
+                        {latencyMetrics.map(metric => (
+                            <div key={metric} className="p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-slate-100 dark:border-slate-800">
+                                <p className="text-xs text-slate-500 mb-1 capitalize">{metric.replace(/_/g, ' ')}</p>
+                                <p className="text-lg font-bold text-slate-900 dark:text-white">
+                                    {chartData[chartData.length - 1][metric]} <span className="text-xs font-normal text-slate-400">ms</span>
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Charts */}
+                <div className="lg:col-span-2 space-y-6">
+                    {scoreMetrics.length > 0 && (
+                        <div className="h-[250px] w-full">
+                            <h4 className="text-sm font-medium text-slate-500 uppercase tracking-wider mb-4">Score Trends</h4>
+                            <ResponsiveContainer width="100%" height="100%">
+                                <LineChart data={chartData}>
+                                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
+                                    <XAxis
+                                        dataKey="displayDate"
+                                        stroke="#94a3b8"
+                                        fontSize={12}
+                                        tickLine={false}
+                                        axisLine={false}
+                                    />
+                                    <YAxis
+                                        domain={[0, 1]}
+                                        stroke="#94a3b8"
+                                        fontSize={12}
+                                        tickLine={false}
+                                        axisLine={false}
+                                    />
+                                    <Tooltip
+                                        contentStyle={{ backgroundColor: '#fff', borderRadius: '8px', border: '1px solid #e2e8f0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
+                                        itemStyle={{ fontSize: '12px' }}
+                                    />
+                                    <Legend />
+                                    {scoreMetrics.map((metric, idx) => (
+                                        <Line
+                                            key={metric}
+                                            type="monotone"
+                                            dataKey={metric}
+                                            stroke={COLORS[idx % COLORS.length]}
+                                            strokeWidth={2}
+                                            dot={{ r: 3, fill: COLORS[idx % COLORS.length] }}
+                                            activeDot={{ r: 5 }}
+                                        />
+                                    ))}
+                                </LineChart>
+                            </ResponsiveContainer>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </Card>
+    );
+}
+
+const COLORS = ['#8b5cf6', '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#ec4899'];
+
+function LoadingState() {
+    return (
+        <div className="h-64 flex items-center justify-center border border-dashed border-slate-200 dark:border-slate-700 rounded-xl">
+            <div className="flex flex-col items-center gap-3">
+                <Activity className="w-8 h-8 text-primary-500 animate-spin" />
+                <p className="text-slate-500 dark:text-slate-400">Loading metrics...</p>
+            </div>
+        </div>
+    );
+}
+
+function ErrorState({ error }) {
+    return (
+        <div className="h-64 flex items-center justify-center border border-rose-200 dark:border-rose-900 bg-rose-50 dark:bg-rose-900/10 rounded-xl">
+            <p className="text-rose-600 dark:text-rose-400">{error}</p>
+        </div>
+    );
+}
+
+function EmptyState() {
+    return (
+        <div className="h-64 flex items-center justify-center border border-dashed border-slate-200 dark:border-slate-700 rounded-xl">
+            <div className="text-center">
+                <BarChart2 className="w-12 h-12 text-slate-300 mx-auto mb-3" />
+                <p className="text-slate-500 dark:text-slate-400">No metrics logged yet</p>
+                <p className="text-xs text-slate-400 mt-1">Run a pipeline with model evaluation to see metrics here</p>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../../../../utils/api';
+import { DataView } from '../../../../components/ui/DataView';
+import { Link } from 'react-router-dom';
+import { Activity, Clock } from 'lucide-react';
+import { formatDate } from '../../../../utils/date';
+
+export function ProjectPipelinesList({ projectId }) {
+    const [pipelines, setPipelines] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchPipelines = async () => {
+            try {
+                // In a real scenario, we would filter by project ID
+                // For now, we'll fetch all and filter client-side or assume the API handles it
+                const response = await fetchApi(`/api/pipelines?project=${projectId}`);
+                const data = await response.json();
+                // API returns {pipelines: [...]}
+                setPipelines(Array.isArray(data?.pipelines) ? data.pipelines : []);
+            } catch (error) {
+                console.error('Failed to fetch pipelines:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (projectId) {
+            fetchPipelines();
+        }
+    }, [projectId]);
+
+    const columns = [
+        {
+            header: 'Pipeline Name',
+            key: 'name',
+            render: (pipeline) => (
+                <Link to={`/pipelines/${pipeline.id || pipeline.name}`} className="flex items-center gap-3 group">
+                    <div className="p-2 bg-blue-500/10 rounded-lg group-hover:bg-blue-500/20 transition-colors">
+                        <Activity className="w-4 h-4 text-blue-500" />
+                    </div>
+                    <span className="font-medium text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                        {pipeline.name}
+                    </span>
+                </Link>
+            )
+        },
+        {
+            header: 'Version',
+            key: 'version',
+            render: (pipeline) => (
+                <span className="px-2 py-1 bg-slate-100 dark:bg-slate-700 rounded text-xs font-medium">
+                    v{pipeline.version || '1.0'}
+                </span>
+            )
+        },
+        {
+            header: 'Created',
+            key: 'created',
+            render: (pipeline) => (
+                <span className="text-slate-500 text-sm">
+                    {formatDate(pipeline.created)}
+                </span>
+            )
+        }
+    ];
+
+    return (
+        <DataView
+            items={pipelines}
+            loading={loading}
+            columns={columns}
+            initialView="table"
+            renderGrid={(pipeline) => (
+                <Link to={`/pipelines/${pipeline.id || pipeline.name}`} 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-4">
+                            <div className="p-2.5 bg-blue-50 dark:bg-blue-900/20 rounded-lg group-hover:bg-blue-100 dark:group-hover:bg-blue-900/40 transition-colors">
+                                <Activity className="w-6 h-6 text-blue-600 dark:text-blue-400" />
+                            </div>
+                            <span className="px-2.5 py-1 bg-slate-100 dark:bg-slate-700 rounded-full text-xs font-medium text-slate-600 dark:text-slate-300">
+                                v{pipeline.version || '1.0'}
+                            </span>
+                        </div>
+
+                        <h3 className="font-semibold text-lg text-slate-900 dark:text-white mb-1 truncate" title={pipeline.name}>
+                            {pipeline.name}
+                        </h3>
+
+                        <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 mt-4 pt-4 border-t border-slate-100 dark:border-slate-700/50">
+                            <Clock className="w-4 h-4" />
+                            <span>Created {formatDate(pipeline.created)}</span>
+                        </div>
+                    </div>
+                </Link>
+            )}
+            emptyState={
+                <div className="text-center py-8">
+                    <Activity className="w-10 h-10 mx-auto text-slate-300 mb-2" />
+                    <p className="text-slate-500">No pipelines found for this project</p>
+                </div>
+            }
+        />
+    );
+}

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

@@ -0,0 +1,189 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import ReactFlow, {
+    Background,
+    Controls,
+    useNodesState,
+    useEdgesState,
+    Position
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import { fetchApi } from '../../../../utils/api';
+import { useParams, useNavigate } from 'react-router-dom';
+
+const nodeDefaults = {
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+};
+
+export function ProjectRelations() {
+    const { projectId } = useParams();
+    const navigate = useNavigate();
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const [loading, setLoading] = useState(true);
+
+    const onNodeClick = useCallback((event, node) => {
+        if (node.id.startsWith('pipeline-')) {
+            // Extract pipeline name from ID "pipeline-name"
+            // In a real app, we might need the ID, but here we use name as ID often
+            // Assuming we navigate to pipeline details.
+            // Since we don't have a direct route for pipeline details yet (or do we?),
+            // let's assume /pipelines/:id.
+            // But wait, the ID in the graph is "pipeline-{name}".
+            // Let's just navigate to the pipelines tab for now or a specific pipeline page if it exists.
+            // The user asked for "possibility to go to details of pipeline or run".
+            // I'll assume routes /pipelines/:id and /runs/:id exist or will exist.
+            // For now, let's log it and try to navigate.
+            const pipelineName = node.data.label;
+            // We don't have the UUID here easily unless we store it in data.
+            // Let's store the full object in data.
+        }
+    }, [navigate]);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                if (!projectId) return;
+
+                const [pipelinesRes, runsRes, artifactsRes] = await Promise.all([
+                    fetchApi(`/api/pipelines?project=${projectId}`),
+                    fetchApi(`/api/runs?project=${projectId}`),
+                    fetchApi(`/api/assets?project=${projectId}`)
+                ]);
+
+                const pipelinesData = await pipelinesRes.json();
+                const runsData = await runsRes.json();
+                const artifactsData = await artifactsRes.json();
+
+                const pipelines = Array.isArray(pipelinesData?.pipelines) ? pipelinesData.pipelines : [];
+                const runs = Array.isArray(runsData?.runs) ? runsData.runs : [];
+                const artifacts = Array.isArray(artifactsData?.artifacts) ? artifactsData.artifacts : [];
+
+                console.log("Relations Data:", { pipelines, runs, artifacts });
+
+                // Build graph
+                const newNodes = [];
+                const newEdges = [];
+
+                // Project Node
+                newNodes.push({
+                    id: 'project',
+                    type: 'input',
+                    data: { label: 'Project' },
+                    position: { x: 0, y: 300 },
+                    ...nodeDefaults,
+                    style: { background: '#3b82f6', color: 'white', border: 'none', borderRadius: '8px', padding: '10px', width: 150 }
+                });
+
+                if (pipelines.length === 0) {
+                    // Add a placeholder node if no pipelines
+                    newNodes.push({
+                        id: 'no-pipelines',
+                        data: { label: 'No Pipelines Found' },
+                        position: { x: 250, y: 300 },
+                        style: { background: '#f1f5f9', color: '#64748b', border: '1px dashed #cbd5e1', borderRadius: '8px', padding: '10px' }
+                    });
+                    newEdges.push({
+                        id: 'e-project-empty',
+                        source: 'project',
+                        target: 'no-pipelines',
+                        animated: true,
+                        style: { stroke: '#cbd5e1', strokeDasharray: '5,5' }
+                    });
+                }
+
+                // Pipeline Nodes
+                pipelines.forEach((pipeline, index) => {
+                    const pipelineId = `pipeline-${pipeline.name}`; // Using name as ID for uniqueness in graph
+                    newNodes.push({
+                        id: pipelineId,
+                        data: { label: pipeline.name, original: pipeline },
+                        position: { x: 250, y: index * 120 }, // Increased spacing
+                        ...nodeDefaults,
+                        style: { background: '#fff', border: '1px solid #e2e8f0', borderRadius: '8px', padding: '10px', width: 200, cursor: 'pointer' }
+                    });
+                    newEdges.push({
+                        id: `e-project-${pipelineId}`,
+                        source: 'project',
+                        target: pipelineId,
+                        animated: true,
+                        style: { stroke: '#94a3b8' }
+                    });
+                });
+
+                // Run Nodes (limit to recent 5 per pipeline to avoid clutter)
+                const recentRuns = runs.slice(0, 10);
+                recentRuns.forEach((run, index) => {
+                    const runId = `run-${run.run_id}`;
+                    const pipelineId = `pipeline-${run.pipeline_name}`;
+
+                    // Only add if pipeline exists in graph
+                    if (newNodes.find(n => n.id === pipelineId)) {
+                        newNodes.push({
+                            id: runId,
+                            data: { label: `Run: ${run.name || run.run_id.slice(0, 8)}`, original: run },
+                            position: { x: 600, y: index * 100 },
+                            ...nodeDefaults,
+                            style: {
+                                background: run.status === 'completed' ? '#ecfdf5' : '#fff',
+                                border: `1px solid ${run.status === 'completed' ? '#10b981' : '#e2e8f0'}`,
+                                borderRadius: '8px',
+                                padding: '10px',
+                                width: 220,
+                                cursor: 'pointer'
+                            }
+                        });
+                        newEdges.push({
+                            id: `e-${pipelineId}-${runId}`,
+                            source: pipelineId,
+                            target: runId,
+                            animated: true,
+                            style: { stroke: '#94a3b8' }
+                        });
+                    }
+                });
+
+                setNodes(newNodes);
+                setEdges(newEdges);
+            } catch (error) {
+                console.error('Failed to fetch relations data:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [projectId]);
+
+    const handleNodeClick = (event, node) => {
+        if (node.id.startsWith('pipeline-') && node.data.original) {
+            // Navigate to pipeline details (assuming route exists, or just log for now)
+            // navigate(`/pipelines/${node.data.original.id}`); // We don't have pipeline ID in list usually, just name?
+            // Let's assume we can navigate to a pipeline page.
+            console.log("Clicked pipeline:", node.data.original);
+        } else if (node.id.startsWith('run-') && node.data.original) {
+            navigate(`/runs/${node.data.original.run_id}`);
+        }
+    };
+
+    if (loading) {
+        return <div className="h-[400px] w-full bg-slate-50 dark:bg-slate-800/50 rounded-xl animate-pulse" />;
+    }
+
+    return (
+        <div className="h-[500px] w-full bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onNodeClick={handleNodeClick}
+                fitView
+                attributionPosition="bottom-right"
+            >
+                <Background color="#94a3b8" gap={16} size={1} />
+                <Controls />
+            </ReactFlow>
+        </div>
+    );
+}