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

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

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../../../../utils/api';
+import { DataView } from '../../../../components/ui/DataView';
+import { FileBox, Database, Box, Clock, Download } from 'lucide-react';
+import { formatDate } from '../../../../utils/date';
+import { downloadArtifactById } from '../../../../utils/downloads';
+
+export function ProjectArtifactsList({ projectId, type }) {
+    const [artifacts, setArtifacts] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchArtifacts = async () => {
+            try {
+                let url = `/api/assets?project=${projectId}`;
+                if (type) {
+                    url += `&asset_type=${type}`;
+                }
+
+                const response = await fetchApi(url);
+                const data = await response.json();
+
+                if (data.assets && Array.isArray(data.assets)) {
+                    setArtifacts(data.assets);
+                } else {
+                    setArtifacts([]);
+                }
+            } catch (error) {
+                console.error('Failed to fetch artifacts:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (projectId) {
+            fetchArtifacts();
+        }
+    }, [projectId, type]);
+
+    const columns = [
+        {
+            key: 'name',
+            label: 'Name',
+            sortable: true,
+            render: (item) => (
+                <div className="flex items-center gap-2">
+                    <FileBox className="w-4 h-4 text-blue-500" />
+                    <span className="font-medium text-slate-900 dark:text-white">{item.name}</span>
+                </div>
+            )
+        },
+        {
+            key: 'type',
+            label: 'Type',
+            sortable: true,
+            render: (item) => (
+                <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-200">
+                    {item.type}
+                </span>
+            )
+        },
+        {
+            key: 'created_at',
+            label: 'Created',
+            sortable: true,
+            render: (item) => (
+                <div className="flex items-center gap-1 text-slate-500">
+                    <Clock className="w-3 h-3" />
+                    <span>{formatDate(item.created_at)}</span>
+                </div>
+            )
+        },
+        {
+            key: 'path',
+            label: 'Path',
+            render: (item) => (
+                <span className="text-xs text-slate-400 font-mono truncate max-w-[200px] block" title={item.path}>
+                    {item.path}
+                </span>
+            )
+        },
+        {
+            key: 'actions',
+            label: 'Actions',
+            render: (item) => (
+                <button
+                    onClick={() => downloadArtifactById(item.artifact_id)}
+                    className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium text-primary-600 hover:text-primary-700 hover:bg-primary-50 transition-colors disabled:opacity-50"
+                    disabled={!item.artifact_id}
+                >
+                    <Download size={14} /> Download
+                </button>
+            )
+        }
+    ];
+
+    return (
+        <DataView
+            items={artifacts}
+            loading={loading}
+            columns={columns}
+            initialView="table"
+            searchKeys={['name', 'type', 'path']}
+            renderGrid={(item) => (
+                <div className="p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 hover:shadow-md transition-shadow">
+                    <div className="flex items-start justify-between mb-3">
+                        <div className="flex items-center gap-2">
+                            <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+                                <FileBox className="w-5 h-5 text-blue-500" />
+                            </div>
+                            <div>
+                                <h3 className="font-medium text-slate-900 dark:text-white">{item.name}</h3>
+                                <span className="text-xs text-slate-500">{item.type}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                        <div className="flex items-center gap-2">
+                            <Clock className="w-4 h-4" />
+                            <span>{formatDate(item.created_at)}</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <Database className="w-4 h-4" />
+                            <span className="truncate font-mono text-xs">{item.path}</span>
+                        </div>
+                    </div>
+
+                    <button
+                        onClick={() => downloadArtifactById(item.artifact_id)}
+                        className="mt-4 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-primary-50 text-primary-700 hover:bg-primary-100 transition-colors disabled:opacity-50"
+                        disabled={!item.artifact_id}
+                    >
+                        <Download size={16} /> Download
+                    </button>
+                </div>
+            )}
+            emptyState={
+                <div className="text-center py-12">
+                    <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 dark:bg-slate-800 mb-4">
+                        <Box className="w-6 h-6 text-slate-400" />
+                    </div>
+                    <h3 className="text-lg font-medium text-slate-900 dark:text-white mb-1">No artifacts found</h3>
+                    <p className="text-slate-500">
+                        {type ? `No ${type}s have been created yet.` : 'No artifacts have been created yet.'}
+                    </p>
+                </div>
+            }
+        />
+    );
+}

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

@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../../../../utils/api';
+import { DataView } from '../../../../components/ui/DataView';
+import { FlaskConical, Clock, Tag, PlayCircle } from 'lucide-react';
+import { formatDate } from '../../../../utils/date';
+
+export function ProjectExperimentsList({ projectId }) {
+    const [experiments, setExperiments] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchExperiments = async () => {
+            try {
+                const response = await fetchApi(`/api/experiments?project=${projectId}`);
+                const data = await response.json();
+
+                if (data.experiments && Array.isArray(data.experiments)) {
+                    setExperiments(data.experiments);
+                } else {
+                    setExperiments([]);
+                }
+            } catch (error) {
+                console.error('Failed to fetch experiments:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (projectId) {
+            fetchExperiments();
+        }
+    }, [projectId]);
+
+    const columns = [
+        {
+            key: 'name',
+            label: 'Name',
+            sortable: true,
+            render: (item) => (
+                <div className="flex items-center gap-2">
+                    <FlaskConical className="w-4 h-4 text-purple-500" />
+                    <div>
+                        <div className="font-medium text-slate-900 dark:text-white">{item.name}</div>
+                        {item.description && (
+                            <div className="text-xs text-slate-500 truncate max-w-[200px]">{item.description}</div>
+                        )}
+                    </div>
+                </div>
+            )
+        },
+        {
+            key: 'run_count',
+            label: 'Runs',
+            sortable: true,
+            render: (item) => (
+                <div className="flex items-center gap-1">
+                    <PlayCircle className="w-3 h-3 text-slate-400" />
+                    <span>{item.run_count || 0}</span>
+                </div>
+            )
+        },
+        {
+            key: 'created_at',
+            label: 'Created',
+            sortable: true,
+            render: (item) => (
+                <div className="flex items-center gap-1 text-slate-500">
+                    <Clock className="w-3 h-3" />
+                    <span>{formatDate(item.created_at)}</span>
+                </div>
+            )
+        },
+        {
+            key: 'tags',
+            label: 'Tags',
+            render: (item) => (
+                <div className="flex flex-wrap gap-1">
+                    {Object.entries(item.tags || {}).map(([key, value]) => (
+                        <span key={key} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
+                            <Tag className="w-3 h-3 mr-1" />
+                            {key}: {value}
+                        </span>
+                    ))}
+                </div>
+            )
+        }
+    ];
+
+    return (
+        <DataView
+            items={experiments}
+            loading={loading}
+            columns={columns}
+            initialView="table"
+            searchKeys={['name', 'description']}
+            renderGrid={(item) => (
+                <div className="p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 hover:shadow-md transition-shadow">
+                    <div className="flex items-start justify-between mb-3">
+                        <div className="flex items-center gap-2">
+                            <div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+                                <FlaskConical className="w-5 h-5 text-purple-500" />
+                            </div>
+                            <div>
+                                <h3 className="font-medium text-slate-900 dark:text-white">{item.name}</h3>
+                                <div className="text-xs text-slate-500 flex items-center gap-1">
+                                    <Clock className="w-3 h-3" />
+                                    {formatDate(item.created_at)}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-1 text-xs font-medium bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-full">
+                            <PlayCircle className="w-3 h-3" />
+                            {item.run_count || 0} runs
+                        </div>
+                    </div>
+
+                    {item.description && (
+                        <p className="text-sm text-slate-600 dark:text-slate-400 mb-3 line-clamp-2">
+                            {item.description}
+                        </p>
+                    )}
+
+                    <div className="flex flex-wrap gap-1">
+                        {Object.entries(item.tags || {}).map(([key, value]) => (
+                            <span key={key} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
+                                {key}: {value}
+                            </span>
+                        ))}
+                    </div>
+                </div>
+            )}
+            emptyState={
+                <div className="text-center py-12">
+                    <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 dark:bg-slate-800 mb-4">
+                        <FlaskConical className="w-6 h-6 text-slate-400" />
+                    </div>
+                    <h3 className="text-lg font-medium text-slate-900 dark:text-white mb-1">No experiments found</h3>
+                    <p className="text-slate-500">
+                        Create an experiment to track your model development.
+                    </p>
+                </div>
+            }
+        />
+    );
+}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Activity, Clock, Database, Folder, GitBranch, Box } from 'lucide-react';
+import { formatDate } from '../../../../utils/date';
+
+export function ProjectHeader({ project, stats, loading }) {
+    if (loading || !project) {
+        return (
+            <div className="animate-pulse space-y-4">
+                <div className="h-8 bg-slate-200 dark:bg-slate-700 rounded w-1/3"></div>
+                <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded w-1/2"></div>
+                <div className="grid grid-cols-4 gap-4">
+                    <div className="h-24 bg-slate-200 dark:bg-slate-700 rounded-xl"></div>
+                    <div className="h-24 bg-slate-200 dark:bg-slate-700 rounded-xl"></div>
+                    <div className="h-24 bg-slate-200 dark:bg-slate-700 rounded-xl"></div>
+                    <div className="h-24 bg-slate-200 dark:bg-slate-700 rounded-xl"></div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex items-start justify-between">
+            <div className="flex items-center gap-4">
+                <div className="p-3 bg-blue-600 rounded-xl shadow-lg shadow-blue-500/20">
+                    <Folder className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                    <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-1">{project.name}</h1>
+                    <div className="flex items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
+                        <span>Created {formatDate(project.metadata?.created_at || project.created_at)}</span>
+                        {(project.metadata?.description || project.description) && (
+                            <>
+                                <span>•</span>
+                                <span>{project.metadata?.description || project.description}</span>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <div className="flex gap-2">
+                {/* Actions like Edit/Delete can go here */}
+            </div>
+        </div>
+    );
+}