Skip to content

Commit

Permalink
improved ux
Browse files Browse the repository at this point in the history
  • Loading branch information
@MadcowD
MadcowD committed Aug 12, 2024
1 parent 45a6d59 commit a35bb9e
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 84 deletions.
105 changes: 61 additions & 44 deletions ell-studio/src/components/LMPDetailsSidePanel.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -38,104 +38,121 @@ 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"
>
<div className="bg-card p-4 rounded-lg shadow-md">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold text-card-foreground">Version Info</h3>
<div className="bg-card p-2 rounded">
<div className="flex justify-between items-center mb-1">
<h3 className="text-sm font-semibold text-card-foreground">Version Info</h3>
<VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
</div>
<div className="grid grid-cols-2 gap-4">
<StatItem icon={FiClock} label="Created" value={getTimeAgo(new Date(lmp.created_at))} />
<StatItem icon={FiTag} label="Is LMP" value={lmp.is_lm ? 'Yes' : 'No'} />
<StatItem icon={FiZap} label="Total Invocations" value={totalInvocations} />
<StatItem icon={FiHash} label="Avg. Latency" value={`${avgLatency.toFixed(2)}ms`} />
<div className="grid grid-cols-2 gap-y-0.5">
<div className="flex items-center">
<FiClock className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Created:</span>
</div>
<div className="text-right">{getTimeAgo(new Date(lmp.created_at))}</div>
<div className="flex items-center">
<FiTag className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Is LMP:</span>
</div>
<div className="text-right">{lmp.is_lm ? 'Yes' : 'No'}</div>
<div className="flex items-center">
<FiZap className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Invocations:</span>
</div>
<div className="text-right">{totalInvocations}</div>
<div className="flex items-center">
<FiHash className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Avg. Latency:</span>
</div>
<div className="text-right">{avgLatency.toFixed(2)}ms</div>
</div>
</div>

{lmp.lm_kwargs && (
<div className="bg-card p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold text-card-foreground mb-3">LM Keywords</h3>
<pre className="overflow-x-auto text-sm text-muted-foreground bg-muted p-3 rounded-md">
<div className="bg-card p-2 rounded">
<h3 className="text-sm font-semibold text-card-foreground mb-1 flex items-center">
<FiCode className="mr-1" size={14} /> LM Keywords
</h3>
<pre className="overflow-x-auto text-xs text-muted-foreground bg-muted p-1 rounded">
<code>{JSON.stringify(lmp.lm_kwargs, null, 2)}</code>
</pre>
</div>
)}

<div className="bg-card p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold text-card-foreground mb-3">Uses</h3>
<div className="bg-card p-2 rounded">
<h3 className="text-sm font-semibold text-card-foreground mb-1">Uses</h3>
{uses && uses.length > 0 ? (
<ul className="space-y-2">
<ul className="space-y-0.5">
{uses.filter(use => !!use).map((use) => (
<motion.li
key={use.lmp_id}
whileHover={{ scale: 1.02 }}
className="text-sm bg-muted p-2 rounded-md"
whileHover={{ scale: 1.01 }}
className=" p-0.5 rounded"
>
<Link to={`/lmp/${use.name}/${use.lmp_id}`} className="text-primary hover:text-primary/80 transition-colors">
<LMPCardTitle lmp={use} displayVersion scale={50} shortVersion={true} />
<Card>
<LMPCardTitle lmp={use} displayVersion scale={50} />
</Card>
</Link>
</motion.li>
))}
</ul>
) : (
<p className="text-sm text-muted-foreground">No dependencies</p>
<p className="text-muted-foreground">No dependencies</p>
)}
</div>

<MetricCard
<MetricChart
title="Invocations"
rawData={chartData}
dataKey="count"
color="#8884d8"
yAxisLabel="Count"
/>

<MetricCard
<MetricChart
title="Latency"
rawData={chartData}
dataKey="latency"
color="#82ca9d"
aggregation="avg"
yAxisLabel="ms"
/>

<div className="bg-card p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold text-card-foreground mb-3">Version History</h3>
<div className="space-y-2 max-h-64 overflow-y-auto pr-2">
{/*
<div className="bg-card p-2 rounded">
<h3 className="text-sm font-semibold text-card-foreground mb-1">Version History</h3>
<div className="space-y-0.5 max-h-40 overflow-y-auto pr-1">
{versionHistory.map((version, index) => (
<motion.div
key={version.lmp_id}
whileHover={{ scale: 1.02 }}
className={`p-3 rounded-md text-sm ${
whileHover={{ scale: 1.01 }}
className={`p-0.5 rounded ${
version.lmp_id === lmp.lmp_id
? 'bg-primary/10'
? 'bg-primary/10 border-l-2 border-primary'
: 'bg-muted hover:bg-muted/80'
}`}
>
<Link to={`/lmp/${version.name}/${version.lmp_id}`} className="block">
<div className="flex justify-between items-center">
<span className={`font-medium ${
version.lmp_id === lmp.lmp_id ? 'text-primary' : 'text-card-foreground'
}`}>
v{versionHistory.length - index}
</span>
<span className="text-muted-foreground">
<FiCalendar className="inline mr-1" size={12} />
{format(new Date(version.created_at), 'MMM d, yyyy')}
</span>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-1">
<span className="font-semibold">v{versionHistory.length - index}</span>
<span className="text-xs text-muted-foreground">
{format(new Date(version.created_at), 'MMM d, yyyy HH:mm')}
</span>
</div>
<FiChevronRight className="text-muted-foreground" size={12} />
</div>
{version.commit_message && (
<p className="text-muted-foreground mt-1 truncate">
<FiGitCommit className="inline mr-1" size={12} />
<p className="text-xs text-muted-foreground truncate">
{version.commit_message}
</p>
)}
</Link>
</motion.div>
))}
</div>
</div>
</div> */}
</motion.div>
</SidePanel>
);
Expand Down
22 changes: 11 additions & 11 deletions ell-studio/src/components/MetricChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,11 +149,11 @@ function MetricChart({ rawData, dataKey, color, yAxisLabel, aggregation="sum", t
);

return (
<div className="bg-card p-4 rounded-lg shadow-md">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold text-card-foreground">{title}</h3>
<div className="bg-card p-2 rounded">
<div className="flex justify-between items-center mb-2">
<h3 className="text-sm font-semibold text-card-foreground">{title}</h3>
<select
className="bg-muted text-muted-foreground text-sm border border-input rounded px-2 py-1"
className="bg-muted text-muted-foreground text-xs border border-input rounded px-1 py-0.5"
value={selectedTimeRange}
onChange={(e) => setSelectedTimeRange(e.target.value)}
>
Expand All @@ -164,11 +164,11 @@ function MetricChart({ rawData, dataKey, color, yAxisLabel, aggregation="sum", t
))}
</select>
</div>
<div className="h-64">
<div className="h-48">
<ResponsiveContainer width="100%" height="100%">
<AreaChart
data={aggregatedData}
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
margin={{ top: 5, right: 5, left: 0, bottom: 0 }}
>
<defs>
<linearGradient id={`color${dataKey}`} x1="0" y1="0" x2="0" y2="1">
Expand All @@ -179,18 +179,18 @@ function MetricChart({ rawData, dataKey, color, yAxisLabel, aggregation="sum", t
<XAxis
dataKey="date"
stroke="#718096"
tick={{ fill: "#718096", fontSize: 10 }}
tick={{ fill: "#718096", fontSize: 9 }}
tickFormatter={formatXAxis}
/>
<YAxis
stroke="#718096"
tick={{ fill: "#718096", fontSize: 10 }}
tick={{ fill: "#718096", fontSize: 9 }}
label={{
value: yAxisLabel,
angle: -90,
position: "insideLeft",
fill: "#718096",
fontSize: 12,
fontSize: 10,
}}
/>
<CartesianGrid strokeDasharray="3 3" stroke="#4A5568" />
Expand All @@ -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}
Expand All @@ -213,7 +213,7 @@ function MetricChart({ rawData, dataKey, color, yAxisLabel, aggregation="sum", t
/>
<Brush
dataKey="date"
height={20}
height={15}
stroke={color}
fill="#2D3748"
tickFormatter={formatXAxis}
Expand Down
95 changes: 67 additions & 28 deletions ell-studio/src/components/invocations/InvocationsAnalyticsSidePanel.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React from 'react';
import { FiZap, FiClock, FiHash, FiUsers, FiPercent, FiBox } from 'react-icons/fi';
import { Link } from 'react-router-dom';
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 { LMPCardTitle } from '../depgraph/LMPCardTitle';
import { Card } from '../common/Card';

const InvocationsAnalyticsSidePanel = ({ aggregateData, sidebarMetrics }) => {
if (!aggregateData || !sidebarMetrics) return null;
Expand All @@ -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"
>
<div className="bg-card p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold text-card-foreground mb-4">Overview</h3>
<div className="grid grid-cols-2 gap-4">
<StatItem icon={FiZap} label="Total Invocations" value={sidebarMetrics.totalInvocations} />
<StatItem icon={FiClock} label="Avg. Latency" value={`${sidebarMetrics.avgLatency.toFixed(2)}ms`} />
<StatItem icon={FiHash} label="Total Tokens" value={sidebarMetrics.totalTokens} />
<StatItem icon={FiUsers} label="Unique LMPs" value={sidebarMetrics.uniqueLMPs} />
<StatItem icon={FiPercent} label="Success Rate" value={`${sidebarMetrics.successRate.toFixed(2)}%`} />
<StatItem icon={FiBox} label="Avg Tokens/Invocation" value={(sidebarMetrics.totalTokens / sidebarMetrics.totalInvocations).toFixed(2)} />
<div className="bg-card p-2 rounded">
<h3 className="text-sm font-semibold text-card-foreground mb-1">Overview</h3>
<div className="grid grid-cols-2 gap-y-0.5">
<div className="flex items-center">
<FiZap className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Total Invocations:</span>
</div>
<div className="text-right">{sidebarMetrics.totalInvocations}</div>
<div className="flex items-center">
<FiClock className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Avg. Latency:</span>
</div>
<div className="text-right">{sidebarMetrics.avgLatency?.toFixed(2)}ms</div>
<div className="flex items-center">
<FiHash className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Total Tokens:</span>
</div>
<div className="text-right">{sidebarMetrics.totalTokens}</div>
<div className="flex items-center">
<FiUsers className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Unique LMPs:</span>
</div>
<div className="text-right">{sidebarMetrics.uniqueLMPs}</div>
<div className="flex items-center">
<FiPercent className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Success Rate:</span>
</div>
<div className="text-right">{sidebarMetrics.successRate.toFixed(2)}%</div>
<div className="flex items-center">
<FiBox className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Avg Tokens/Invocation:</span>
</div>
<div className="text-right">{(sidebarMetrics.totalTokens / sidebarMetrics.totalInvocations)?.toFixed(2)}</div>
</div>
</div>

<MetricCard
<MetricChart
title="Invocations Over Time"
rawData={aggregateData.graph_data}
dataKey="count"
Expand All @@ -37,7 +63,7 @@ const InvocationsAnalyticsSidePanel = ({ aggregateData, sidebarMetrics }) => {
yAxisLabel="Count"
/>

<MetricCard
<MetricChart
title="Latency Over Time"
rawData={aggregateData.graph_data}
dataKey="avg_latency"
Expand All @@ -46,32 +72,45 @@ const InvocationsAnalyticsSidePanel = ({ aggregateData, sidebarMetrics }) => {
yAxisLabel="ms"
/>

<MetricCard
<MetricChart
title="Tokens Over Time"
rawData={aggregateData.graph_data}
dataKey="tokens"
color="#ffc658"
yAxisLabel="Tokens"
/>

<div className="bg-card p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold text-card-foreground mb-3">Top 5 LMPs</h3>
<ul className="space-y-2">
{sidebarMetrics.topLMPs.map(([lmp, count], index) => (
{/* <div className="bg-card p-2 rounded">
<h3 className="text-sm font-semibold text-card-foreground mb-1">Top 5 LMPs</h3>
<ul className="space-y-0.5">
{sidebarMetrics.topLMPs.map(([lmpName, count], index) => (
<motion.li
key={lmp}
whileHover={{ scale: 1.02 }}
className="flex justify-between items-center text-sm bg-muted p-2 rounded-md"
key={lmpName}
whileHover={{ scale: 1.01 }}
className="p-0.5 rounded"
>
<span className="text-card-foreground">
<span className="text-primary mr-2">{index + 1}.</span>
{lmp}
</span>
<span className="text-muted-foreground">{count} invocations</span>
<Link to={`/lmp/${lmpName}`} className="text-primary hover:text-primary/80 transition-colors">
<Card className="relative">
<LMPCardTitle
lmp={{ name: lmpName, is_lm: false }} // Assuming we don't have full LMP data here
displayVersion={false}
scale={50}
/>
<div className="absolute top-0 right-0 bg-muted text-muted-foreground text-xs px-1 rounded-bl">
{count} invocations
</div>
<div className="mt-1 bg-primary/5 h-1 rounded-full overflow-hidden">
<div
className="bg-primary h-full"
style={{ width: `${(count / sidebarMetrics.totalInvocations) * 100}%` }}
></div>
</div>
</Card>
</Link>
</motion.li>
))}
</ul>
</div>
</div> */}
</motion.div>
</SidePanel>
);
Expand Down
3 changes: 2 additions & 1 deletion ell-studio/src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,4 +104,5 @@
to {
stroke-dashoffset: -10;
}
}
}

0 comments on commit a35bb9e

Please sign in to comment.