Merge branch 'main' into pubsub

MadcowD · Aug 12, 2024 · a85bd64 · a85bd64
2 parents 97455fc + 9a448e7
commit a85bd64
Show file tree

Hide file tree

Showing 17 changed files with 573 additions and 197 deletions.
diff --git a/README.md b/README.md
@@ -128,3 +128,13 @@ You can then visualize your promtps by visiting the frontend on `http://localhos
 - Convert all of our todos into issues and milestones
 - Multimodality
 - Output parsing.
+
+## Architecture v0
+```mermaid
+graph TD
+    A[Python Code<br>with LMP calls] -->|Invokes| B[Language Model<br>Programs LMPs]
+    B -->|Writes| C[Storage Backend<br>SQLite or PostgreSQL]
+    D[ell Studio<br>Python Server] -->|Reads| C
+    D -->|HTTP API| E[ell Studio<br>JavaScript Client]
+    D -->|WebSocket Updates| E
+```
diff --git a/ell-studio/package-lock.json b/ell-studio/package-lock.json
diff --git a/ell-studio/package.json b/ell-studio/package.json
@@ -21,6 +21,7 @@
     "dagre": "^0.8.5",
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
+    "framer-motion": "^11.3.24",
     "install": "^0.13.0",
     "lucide-react": "^0.424.0",
     "npm": "^10.8.2",
@@ -31,6 +32,7 @@
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-resizable-panels": "^2.0.22",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",
     "react-syntax-highlighter": "^15.5.0",

diff --git a/ell-studio/src/components/Sidebar.js b/ell-studio/src/components/Sidebar.js
@@ -1,23 +1,62 @@
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { FiHome, FiCode, FiActivity } from 'react-icons/fi';
+import React, { useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { FiZap, FiSettings, FiCode, FiDatabase } from 'react-icons/fi';
+import { BiCube } from 'react-icons/bi';
+import { motion } from 'framer-motion';
 
 const Sidebar = () => {
-  const location = useLocation();
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const isActive = (path) => {
-    return location.pathname === path ? 'bg-[#2a2f3a] text-white' : 'text-gray-400 hover:bg-[#2a2f3a] hover:text-white';
-  };
+  const SidebarLink = ({ to, icon: Icon, label }) => (
+    <NavLink
+      to={to}
+      className={({ isActive }) => `
+        group flex items-center py-3 px-4 rounded-lg transition-all duration-200
+        ${isActive ? 'bg-blue-500/10 text-blue-500' : 'text-gray-400 hover:text-white'}
+      `}
+    >
+      <Icon className="w-5 h-5" />
+      {isExpanded && (
+        <span className="ml-3 text-sm font-medium">{label}</span>
+      )}
+      {!isExpanded && (
+        <div className="fixed left-16 ml-2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
+          {label}
+        </div>
+      )}
+    </NavLink>
+  );
 
   return (
-    <aside className="w-16 bg-[#1c1f26] flex flex-col items-center py-4">
-      <Link to="/" className={`p-3 rounded-lg mb-4 ${isActive('/')}`}>
-        <FiHome className="w-6 h-6" />
-      </Link>
-      <Link to="/traces" className={`p-3 rounded-lg mb-4 ${isActive('/traces')}`}>
-        <FiActivity className="w-6 h-6" />
-      </Link>
-    </aside>
+    <motion.aside 
+      initial={false}
+      animate={{ width: isExpanded ? 200 : 64 }}
+      className="bg-[#1c1f26] h-screen py-6 flex flex-col"
+    >
+      <div className="flex justify-center items-center mb-8">
+        <img src="/gif.gif" alt="ell-studio Logo" className="h-4 invert" />
+      </div>
+
+      <nav className="flex-grow space-y-1 px-2">
+        <SidebarLink to="/" icon={BiCube} label="Models" />
+        <SidebarLink to="/traces" icon={FiZap} label="Traces" />
+        <SidebarLink to="/code" icon={FiCode} label="Code" />
+        <SidebarLink to="/data" icon={FiDatabase} label="Data" />
+      </nav>
+
+      <div className="mt-auto px-2">
+        <SidebarLink to="/settings" icon={FiSettings} label="Settings" />
+      </div>
+
+      <button 
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="mt-4 mx-auto p-2 rounded-full bg-gray-700 hover:bg-gray-600 transition-colors duration-200"
+      >
+        <svg className={`w-4 h-4 text-white transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+    </motion.aside>
   );
 };
 

diff --git a/ell-studio/src/components/depgraph/LMPCardTitle.js b/ell-studio/src/components/depgraph/LMPCardTitle.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { BiCube } from "react-icons/bi";
+import { FiZap } from "react-icons/fi";
 import VersionBadge from "../VersionBadge";
 
 export function LMPCardTitle({
@@ -13,6 +14,7 @@ export function LMPCardTitle({
     shortVersion = false,
     paddingClassOverride = '',
     nameOverride = null,
+    showInvocationCount = true,  // New prop to control invocation count display
     ...rest
 }) {
     const paddingClass = paddingClassOverride ? paddingClassOverride : padding ? 'p-2' : '';
@@ -33,6 +35,12 @@ export function LMPCardTitle({
                  {lmp.name}()
             </code> }
             {displayVersion && <VersionBadge version={lmp.version_number + 1} lmpId={lmp.lmp_id} shortVersion={shortVersion} />}
+            {showInvocationCount && lmp.num_invocations > 0 && (
+                <div className="flex items-center text-xs text-gray-400" title={`${lmp.num_invocations} invocations`}>
+                    <FiZap className="w-3 h-3 mr-1" />
+                    {lmp.num_invocations}
+                </div>
+            )}
         </div>
     );
 }
diff --git a/ell-studio/src/components/invocations/InvocationsTable.js b/ell-studio/src/components/invocations/InvocationsTable.js
@@ -103,6 +103,10 @@ const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize,
     };
   }, [invocationTableData, currentlySelectedTrace, onSelectTrace]);
 
+  useEffect(() => {
+    console.log(`Displaying page ${currentPage + 1}, with ${invocations?.length} invocations`);
+  }, [currentPage, invocations]);
+
   const defaultColumns = [
     { 
       header: 'LMP', 
@@ -117,6 +121,7 @@ const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize,
               e.stopPropagation();
               onClickLMP(item);
             }} 
+            showInvocationCount={false}
           />
         </Card>
       ), 

diff --git a/ell-studio/src/hooks/useBackend.js b/ell-studio/src/hooks/useBackend.js
@@ -139,4 +139,18 @@ export const useLMPHistory = (days = 365) => {
       return response.data;
     },
   });
+};
+
+export const useInvocationsAggregate = (lmpName, lmpId, days = 30) => {
+  return useQuery({
+    queryKey: ['invocationsAggregate', lmpName, lmpId, days],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      if (lmpName) params.append('lmp_name', lmpName);
+      if (lmpId) params.append('lmp_id', lmpId);
+      params.append('days', days);
+      const response = await axios.get(`${API_BASE_URL}/api/invocations/aggregate?${params.toString()}`);
+      return response.data;
+    }
+  });
 };
diff --git a/ell-studio/src/pages/Home.js b/ell-studio/src/pages/Home.js
@@ -5,7 +5,7 @@ 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 { BiCube } from 'react-icons/bi';
 import { Card, CardHeader, CardContent } from 'components/common/Card';
 import { ScrollArea } from 'components/common/ScrollArea';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from 'components/common/Resizable';
@@ -57,7 +57,6 @@ function Home() {
           <div className="flex flex-col h-full">
             <div className={`flex items-center justify-between border-b p-2 py-4`}>
               <span className={`text-xl font-medium ${darkMode ? 'text-gray-100' : 'text-gray-800'} flex items-center`}>
-                <Code className="w-6 h-6 mr-2" />
                 Language Model Programs
               </span>
               <div className="flex items-center">