-
-
-
-
-
-
-
+
);
};
+function CustomControls() {
+ const { zoomIn, zoomOut, fitView, setNodes } = useReactFlow();
+ const [nodesLocked, setNodesLocked] = useState(false);
+
+ const handleZoomIn = () => zoomIn({ duration: 300, step: 0.5 });
+ const handleZoomOut = () => zoomOut({ duration: 300, step: 0.5 });
+ const handleFitView = () => fitView({ duration: 500, padding: 0.1 });
+ const handleToggleNodeLock = () => {
+ setNodes((nodes) =>
+ nodes.map((node) => ({ ...node, draggable: nodesLocked }))
+ );
+ setNodesLocked(!nodesLocked);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
export function DependencyGraph({ lmps, traces, ...rest }) {
// construct ndoes from LMPS
@@ -98,7 +124,7 @@ export function DependencyGraph({ lmps, traces, ...rest }) {
return (
diff --git a/ell-studio/src/pages/Home.js b/ell-studio/src/pages/Home.js
index 14fc924a..2829282a 100644
--- a/ell-studio/src/pages/Home.js
+++ b/ell-studio/src/pages/Home.js
@@ -5,7 +5,13 @@ import { getTimeAgo } from '../utils/lmpUtils';
import { DependencyGraph } from '../components/depgraph/DependencyGraph';
import { useLatestLMPs, useTraces } from '../hooks/useBackend';
import VersionBadge from '../components/VersionBadge';
+import { Code } from 'lucide-react';
+import { Card, CardHeader, CardContent } from 'components/common/Card';
+import { ScrollArea } from 'components/common/ScrollArea';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from 'components/common/Resizable';
+
const MemoizedDependencyGraph = React.memo(DependencyGraph);
+
function Home() {
const [expandedLMP, setExpandedLMP] = useState(null);
const { darkMode } = useTheme();
@@ -46,45 +52,71 @@ function Home() {
return (
-
-
Language Model Programs
-
-
- {lmps.map((lmp) => (
-
toggleExpand(lmp.name, e)}
- >
-
-
e.stopPropagation()} // Prevent card expansion when clicking the link
- >
- {lmp.name}
-
-
-
- ID: {truncateId(lmp.lmp_id)}
-
-
-
- Latest
-
-
-
+
+
+
+
+
+
+
+
+ Total LMPs: {lmps.length}
+
+
+ Last Updated: {lmps[0] && lmps[0].versions && lmps[0].versions[0] ? getTimeAgo(lmps[0].versions[0].created_at) : 'N/A'}
+
-
-
- {lmp.source.length > 100 ? `${lmp.source.substring(0, 100)}...` : lmp.source}
-
-
-
- ))}
-
+
+
+
+
+
+
+
+
+
+ {lmps.map((lmp) => (
+
toggleExpand(lmp.name, e)}
+ >
+
+
+
e.stopPropagation()}
+ >
+ {lmp.name}
+
+
+
+ ID: {truncateId(lmp.lmp_id)}
+
+
+ Latest
+
+
+
+
+
+ {lmp.source.length > 100 ? `${lmp.source.substring(0, 100)}...` : lmp.source}
+
+
+
+
+ ))}
+
+
);
}
diff --git a/ell-studio/src/styles/globals.css b/ell-studio/src/styles/globals.css
index 4faa7f56..8c53c094 100644
--- a/ell-studio/src/styles/globals.css
+++ b/ell-studio/src/styles/globals.css
@@ -62,6 +62,14 @@
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, and Opera */
}
+
+ .react-flow__panel.react-flow__attribution.bottom.right {
+ @apply bg-background p-2 rounded-tl-md rounded-br-md transition-colors duration-300 hover:bg-background/80;
+ }
+
+ .react-flow__panel.react-flow__attribution.bottom.right a {
+ @apply text-foreground;
+ }
}