From a35bb9ef596643a6c8a4c619683b887628573749 Mon Sep 17 00:00:00 2001 From: William Guss Date: Sun, 11 Aug 2024 19:22:26 -0700 Subject: [PATCH] improved ux --- .../src/components/LMPDetailsSidePanel.js | 105 ++++++++++-------- ell-studio/src/components/MetricChart.js | 22 ++-- .../InvocationsAnalyticsSidePanel.js | 95 +++++++++++----- ell-studio/src/styles/globals.css | 3 +- 4 files changed, 141 insertions(+), 84 deletions(-) diff --git a/ell-studio/src/components/LMPDetailsSidePanel.js b/ell-studio/src/components/LMPDetailsSidePanel.js index 195611dc..474e6454 100644 --- a/ell-studio/src/components/LMPDetailsSidePanel.js +++ b/ell-studio/src/components/LMPDetailsSidePanel.js @@ -1,15 +1,15 @@ import React, { useMemo } from 'react'; import { Link } from 'react-router-dom'; -import { FiClock, FiTag, FiGitCommit, FiZap, FiHash, FiCalendar, FiChevronRight } from 'react-icons/fi'; +import { FiClock, FiTag, FiZap, FiHash, FiChevronRight, FiCode } from 'react-icons/fi'; import { getTimeAgo } from '../utils/lmpUtils'; import VersionBadge from './VersionBadge'; import { useInvocationsFromLMP } from '../hooks/useBackend'; import { LMPCardTitle } from './depgraph/LMPCardTitle'; import { format } from 'date-fns'; import SidePanel from './common/SidePanel'; -import StatItem from './common/StatItem'; -import MetricCard from './common/MetricCard'; +import MetricChart from './MetricChart'; import { motion } from 'framer-motion'; +import {Card} from './common/Card'; function LMPDetailsSidePanel({ lmp, uses, versionHistory }) { const { data: invocations } = useInvocationsFromLMP(lmp.name, lmp.lmp_id, 0, 100); @@ -38,52 +38,72 @@ function LMPDetailsSidePanel({ lmp, uses, versionHistory }) { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }} - className="space-y-6" + className="space-y-2 text-sm" > -
-
-

Version Info

+
+
+

Version Info

-
- - - - +
+
+ + Created: +
+
{getTimeAgo(new Date(lmp.created_at))}
+
+ + Is LMP: +
+
{lmp.is_lm ? 'Yes' : 'No'}
+
+ + Invocations: +
+
{totalInvocations}
+
+ + Avg. Latency: +
+
{avgLatency.toFixed(2)}ms
{lmp.lm_kwargs && ( -
-

LM Keywords

- 
+          

+            

+               LM Keywords
+            

+            
               {JSON.stringify(lmp.lm_kwargs, null, 2)}
             

           

         )}
 
-        

-          
Uses

+        

+          
Uses

           {uses && uses.length > 0 ? (
-            
    
+            
      
               {uses.filter(use => !!use).map((use) => (
                 
                   
-                    
+                    
+                    
+                    
                   
                 
               ))}
             
    
           ) : (
-            
    No dependencies
    
+            
    No dependencies
    
           )}
         

 
-        
 
-        
-
-        

-          
Version History

-          

+{/* 
+        

+          
Version History

+          

             {versionHistory.map((version, index) => (
               
                 
-                  

-                    
-                      v{versionHistory.length - index}
-                    
-                    
-                      
-                      {format(new Date(version.created_at), 'MMM d, yyyy')}
-                    
+                  

+                    

+                      v{versionHistory.length - index}
+                      
+                        {format(new Date(version.created_at), 'MMM d, yyyy HH:mm')}
+                      
+                    

+                    
                   

                   {version.commit_message && (
-                    

-                      
+                    

                       {version.commit_message}
                     

                   )}
@@ -135,7 +152,7 @@ function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
               
             ))}
           

-        

+        
 */}
       
     
   );
diff --git a/ell-studio/src/components/MetricChart.js b/ell-studio/src/components/MetricChart.js
index 7bf9e2f4..3d735b75 100644
--- a/ell-studio/src/components/MetricChart.js
+++ b/ell-studio/src/components/MetricChart.js
@@ -149,11 +149,11 @@ function MetricChart({ rawData, dataKey, color, yAxisLabel, aggregation="sum", t
   );
 
   return (
-    

-      

-        
{title}

+    

+      

+        
{title}

         
       

-      

+      

         
           
             
               
@@ -179,18 +179,18 @@ function MetricChart({ rawData, dataKey, color, yAxisLabel, aggregation="sum", t
             
             
             
@@ -199,7 +199,7 @@ function MetricChart({ rawData, dataKey, color, yAxisLabel, aggregation="sum", t
                 backgroundColor: "#2D3748",
                 border: "1px solid #4A5568",
                 color: "#E2E8F0",
-                fontSize: 12,
+                fontSize: 10,
               }}
               labelFormatter={(label) => format(new Date(label), "PPpp")}
               formatter={formatTooltip}
@@ -213,7 +213,7 @@ function MetricChart({ rawData, dataKey, color, yAxisLabel, aggregation="sum", t
             />
              {
   if (!aggregateData || !sidebarMetrics) return null;
@@ -14,21 +16,45 @@ const InvocationsAnalyticsSidePanel = ({ aggregateData, sidebarMetrics }) => {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.3 }}
-        className="space-y-6"
+        className="space-y-2 text-sm"
       >
-        

-          
Overview

-          

-            
-            
-            
-            
-            
-            
+        

+          
Overview

+          

+            

+              
+              Total Invocations:
+            

+            
{sidebarMetrics.totalInvocations}

+            

+              
+              Avg. Latency:
+            

+            
{sidebarMetrics.avgLatency?.toFixed(2)}ms

+            

+              
+              Total Tokens:
+            

+            
{sidebarMetrics.totalTokens}

+            

+              
+              Unique LMPs:
+            

+            
{sidebarMetrics.uniqueLMPs}

+            

+              
+              Success Rate:
+            

+            
{sidebarMetrics.successRate.toFixed(2)}%

+            

+              
+              Avg Tokens/Invocation:
+            

+            
{(sidebarMetrics.totalTokens / sidebarMetrics.totalInvocations)?.toFixed(2)}

           

         

 
-         {
           yAxisLabel="Count"
         />
 
-         {
           yAxisLabel="ms"
         />
 
-         {
           yAxisLabel="Tokens"
         />
 
-        

-          
Top 5 LMPs

-          
    
-            {sidebarMetrics.topLMPs.map(([lmp, count], index) => (
+        {/* 
    
+          
    Top 5 LMPs
    
+          
      
+            {sidebarMetrics.topLMPs.map(([lmpName, count], index) => (
               
-                
-                  {index + 1}.
-                  {lmp}
-                
-                {count} invocations
+                
+                  
+                    
+                    
      
+                      {count} invocations
+                    
      
+                    
      
+                      
      
+                    
      
+                        
+                
                     
             ))}
           
    
-        
    
+        
 */}
       
     
   );
diff --git a/ell-studio/src/styles/globals.css b/ell-studio/src/styles/globals.css
index a1cebeff..3a4fdaca 100644
--- a/ell-studio/src/styles/globals.css
+++ b/ell-studio/src/styles/globals.css
@@ -104,4 +104,5 @@
   to {
     stroke-dashoffset: -10;
   }
-}
\ No newline at end of file
+}
+